html图片怎么弄透明背景,如何使用CSS实现背景图像透明

CSS实现背景图像透明需要用到的属性是opacity属性，但是在有文字的情况下，为了防止文字透明我们需要将元素分开。

CSS中实现背景图像透明的属性是opacity属性，但是，如果你使用它来创建带有文本的内容的话，你就会发现文本内容也会随着透明。

现在，我们先来编写一个只是背景图像透明的CSS。

首先，我们来看一下HTML代码

蒲公英

.bg是一个空div，“蒲公英”写在它之外。

也就是说，下面将利用position属性将“蒲公英”放在图像的上面，我们来看具体的代码实例

首先，给出相对位置(position：relative;)到.content。

为了更容易理解背景透明，我们先给一个黑色的背景.content{

width: 450px;

height: 300px;

background: #000;

position: relative; /*相对位置*/

}

color: #fff;

font-weight: bold;

text-align: center;

}

效果如下：

接下来，我们来设置.bg

将width和height设置为100％并将position设置为绝对位置放在左上(left:0; top: 0;)。.bg{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

background: url(img/pugongying.jpg);

background-size: cover;

opacity: 0.5;

}

效果如下：

实际上，字符位于透明图像下方。

所以，比起固定在绝对位置的背景图像，p的内容必须要在前面。

因此，p也可以通过给予position：absolute；给它堆叠顺序。(因为它被描述为position：absolute;，还可以使用z-index来操纵堆叠顺序。)

最后我们将文字移到中间位置p{

width: 100%;

height: 1.5em;

color: #fff;

font-weight: bold;

text-align: center;

position: absolute;

margin: auto;

top: 0;

bottom: 0;

}

效果如下：

html图片怎么弄透明背景,如何使用CSS实现背景图像透明相关推荐

Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
php背景图片平铺拉伸,利用jQuery和CSS将背景图片拉伸
现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果.本文将带您一起 ...
css的背景图片不显示,wepback打包时，css的背景图片显示不出来，求教！
如题.项目环境使用 webpack 构建的,webpack 这块配置的相关代码是 module: { loaders: [ { test: /\.(js|jsx)$/, exclude: /node_ ...
css背景图毛玻璃,css实现背景图片的毛玻璃效果
问题一css 一.简述问题html 最近在作登陆页面的时候,遇到了一个问题:将登陆页面的背景图片,设置为毛玻璃效果.在网上找到了关于这方面的资料.web 二.问题解决svg .blur { filte ...
html背景置顶,css设置背景图片位置固定
先看下实例html> css背景图片固定 body{ background-image: url("https://picsum.photos/id/100/1080/1400&quo ...
html背景图片语法,下列哪一项是css添加背景图片的正确语法构成？（）
摘要: 下端向下内侧突起称内,下列项形成内侧膨大外侧上端.正确学习响经济因主要是因素缺乏部原动机的内的影.穴的揉外功效劳宫是(,语法陷B邪.和胃痛.体D中止壮身正祛健脾阳举气血.强补益温经.理.扶散寒 ...
html div背景半透,css半透明背景实现方法
这里博主介绍2种办法. 第一种用背景图的方式: 代码如下html> 半透明实例-琅枫个人博客 .div1{width:300px; height:200px; background:url(ht ...
css怎么恢复清背景,常用的CSS中背景background使用技巧
css教程说明 background-image:url("图片的网址"); 背景图 background: url(" 图片的网址 "); 背景 ba ...
CSS -- CSS背景设置总结（纯色背景、背景图片）
文章目录 CSS的背景 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景设置总结 CSS的背景通过 CSS 背景 ...
css 设置背景图片模糊，内容不模糊
方案: 内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置. <!DOCTYPE html><html lang="en"> ...

html图片怎么弄透明背景,如何使用CSS实现背景图像透明

html图片怎么弄透明背景,如何使用CSS实现背景图像透明相关推荐

最新文章

热门文章