跳转到内容

创建透明效果后台图片

写由玛雅沙文

向网站添加背景模式或图像使其更视觉上吸引人并产生强效品牌印象可我们不希望后台图像太分散注意力, 特别是当文本覆盖顶部时在这种情况下,我们可以对后台图像应用透明效果来减少分心度和文本可读性

博客文章探索如何使用不同的CSS技巧生成透明效果和云化不透明变换特征

你会学习

  • 如何搭建页面
  • 如何创建CSS透明度不透明度属性
  • 如何使用后台属性
  • CSS使用缺陷不透明度属性
  • 透明背景云不透明度变换

搭建页面

目标创建简单页面 包含这些元素

  • 网站背景图像透明效果达50%
  • 标题文本
  • 小段文本标题下

HTML代码会像这个

       <体质显示><iv语言类=后台><英格src系统="https://res.www.agrosoland.com/mayashavin/image/upload/v1702370398/Hippopy/Arts/ninja_assassin"类="background-image"><主控类=内存><h1类=头绪>某些文本标题
          h1><公元前类=段码>文本段
         公元前>
         主控>
         iv语言>
         体质显示>CSS样式如下:.back-image {宽度:500px.content {编程:20px0px边距:自动机显示屏屏蔽文本对齐:居中}代码语言htmlXML高山市xml)

浏览器将显示页面后台图像和文本元素如下:

图像显示后文本元素后做后台.background-image:

  • 设置位置定位属性对绝对数.
  • 设置z-index属性对-1.
  • 设置width覆盖整页百分百)
.background-image{{位置定位绝对数宽度:百分百脱机z-index:-一号脱机}代码语言CSS系统高山市sss)

通过这样做,你取英格标准页流中元素相对定位体质显示)上头z-index属性指定栈顺序元素和值-1表示元素置入文本元素

此时点,我们的页面会像这个

文本对比看似良好,背景图像颜色太强分心提高透明度

创建透明与CSS不透明度属性

最直截了当地创建透明性的方法就是使用CSS不透明度属性语法不透明:[值].上头传值可介于0(完全透明)和1(完全不透明)之间进演示中,让我们设置不透明度属性对0.5:

.后台图像//不透明度:0.5脱机}代码语言JavaScript高山市javascript)

浏览器将显示50%透明背景图像,下截图显示

图像看起来更好,但有一个问题 与我们当前使用方法英格元素后台图像即它应该调整自身大小以适应屏幕大小或页面内容不幸地英格元素不自变大小, 我们可能需要设置宽度属性对百分百或高度显示至百分百令它响应

将图像拉伸并变形所以让我们探索更好的方法 创建响应背景图像 并产生透明效果

使用后台属性

代之以使用英格元素,我们可以使用CSS后台属性设置组件背景图像改换英格对空iv语言详解如下:

<iv语言类=后台><iv语言类="background-image">
           iv语言>
          
          iv语言>添加下列CSS规则`.background-image`.back-image {//宽度:百元百分数高度 :百元百分数后台:url//res.www.agrosoland.com/mayashavin/image/upload/v1702370398/Hippopy/Arts/ninja_assassin) center;后台尺寸:内存}代码语言JavaScript高山市javascript)

传值内装For后台尺寸指定背景图像应尽可能大缩放,同时确保其维度小于或等于后台定位区相应的宽度和高度默认时浏览器重复后台图像填充后台缩放时剩余空间后台变换

有了它,我们可以确保后台图像总能响应并适配屏幕尺寸而不超出原创尺寸

使用不透明属性是创建透明背景图像的理想方式吗?

CSS使用缺陷不透明度属性

CSS不透明度属性对元素产生透明效果的极佳方式偏差在于它会波及整个元素 表示它算入嵌套元素

演示中,我们分离后台图像iv语言并主控内容分入二类元素CSS定位和堆栈顺序作为工作补丁显示后保持内容完全不透明主控.if we包内div.background-image,全主控内容继承不透明度属性.background-image下截图显示

自background-opacityCSS属性只允许对后台图像应用透明效果,我们使用组合CSS定位和堆栈顺序的变通解决办法,这是CSS唯一最佳解决办法。

或,如果我们想要一样简单但灵活度高得多的东西,我们可以使用云式不透明度变换

透明背景云不透明度变换

云化不透明度变换能造图象变异 并产生所期望的不透明度效果为此,我们可以添加欧州市 参数到图像云式URL/加载/中位 介于0(完全透明)和100(完全不透明)之间的数

取模URL图像并添加o_50参数透明度为50%并安全清除CSS不透明度,位置定位并z-index发自.background-image,详解如下:

.background-image{{宽度:百分百脱机高度显示:百分百脱机后台:URL(https://res.www.agrosoland.com/mayashavin/image/upload/o_50/v1702370398/Hippopy/Arts/ninja_assassin) center!后台尺寸内存性}代码语言CSS系统高山市sss)

现在,我们可以把`主'内容嵌入'div.backimage

<iv语言类=后台><iv语言类="background-image"><主控类=内存><h1类=头绪>某些文本标题
          h1><公元前类=段码>文本段
         公元前>
         主控>
         iv语言>
         iv语言>代码语言htmlXML高山市xml)

仅此而已输出类同CSS工作变通法,但代码少化

关闭思想

我们学CSS不透明度属性不是创建透明后台图像的最佳解决方案位置定位堆栈顺序z-index和适当的HTML结构极佳选择是将云图像URL上动态不透明变换与正确CSS相合并后台属性创建透明背景图像少代码

增强网站视觉应用云化变换生成触目动图像今天免费签名

相关类别

回顶

相关类别

特征邮箱

Baidu
map