关于设置背景图片的透明度（html+css）

最新推荐文章于 2024-04-12 17:48:26 发布
最新推荐文章于 2024-04-12 17:48:26 发布
阅读量10w+ 收藏 113
点赞数 33
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cooooooooco/article/details/79656358
版权

2018.3.22

设置背景图片的透明度，而不是颜色这种，是图片显示

这个就跟某些博客能够换背景图片当主题一样的道理，看了好久终于搞清楚了

<body>里面是不能直接设置图片的透明度的

需要借助<div>

<style type="text/css">
.bodystyle{
filter:alpha(opacity=50);  
-moz-opacity:0.5;  
-khtml-opacity: 0.5;  
opacity: 0.5;
width:100%;
position:absolute;
background:url(图像/8.JPG) ; 
background-attachment:fixed;
}
</style>

需要在之前就写好，用类的方法表示。

<body >
<div class="bodystyle"></div>
</body>

然后在div中引用这个类，就可以实现图片透明度设置

但是这样也有问题，如果中间有文本存在的话就会也变为透明字体，而且要当背景图片的话就需要将文本放入两个<div>中间

所以需要在css中设置文本的字体透明度

opacity: 1;

即可

Cooooooooco
关注
  • 33
    点赞
  • 踩
  • 113
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css实现背景图片半透明内容不透明的方法
12-13
前言 最近做一个登陆界面的，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。 效果展示 半透明 不透明 常见的失败做法 最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果。 还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。 正确姿势 我想到两个方法，第一个就是利用伪元素::before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现 <!DOCTYPE html> <html lang="en"> <head> <meta cha
html+CSS样式：雪花飘落背景
04-14
它负责生成多个雪花元素，并通过修改它们的位置和透明度来模拟飘落效果。可能会用到`setInterval`或`requestAnimationFrame`来定期更新雪花的状态。 5. **jQuery**：如果项目中使用了jQuery库，那么JavaScript代码...
html 图片透明字不透明,CSS实现背景图片透明，文字不透明效果的两种方法
weixin_36314050的博客
06-04 1122
项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。1.毛玻璃效果：背景图 + 伪类 + flite:blur(3px).demo1{width: 500px;height: 300px;line-height: 50px;text-align: center;}.demo1:before{background: url(http:/...
CSS设置背景图片的透明度
最新发布
HWL5679的博客
04-12 2299
在大多数情况下，使用伪元素的方法是最灵活和可控制的。
CSS 图像透明/不透明opacity
前端小99的博客
04-19 981
创建透明对象，设置悬停效果 img { opacity:0.4; filter:alpha(opacity=40); /* 适用 IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* 适用 IE8 及其更早版本 */ } 图片透明度
html5+css设置图像/形状的透明度/图片边框设置/设置网页元素的阴影效果/设置图形的渐变效果/径向渐变与线性渐变/学习笔记
No1banana的博客
01-29 4210
一、CSS设置颜色与透明度 1.颜色透明度的设置，可以通过引入RGBA模式和opacity属性对背景与图片设置不透明度 1，RGBA模式 rgba(r,g,b,alpha); div{ width: 300px; height: 300px; background: rgb(242,35,36) url("user.jpg") no-repeat; rgba(242,35,36,0.7) /*设置颜色透明度为0.7*/ } 2，opacity模式 opacity:0
html如何让图片背景透明,html – 如何让我的网站的背景透明,而不使内容(图像和文字)也是透明的？...
weixin_39716043的博客
06-07 179
我正在做一个学校项目的网站,我目前有一个小问题,我不能使身体的背景透明,也不影响其内容.textInicioSobre a bandaMembrosBilhetesGaleriaÁrea PessoalGaleria de imagensAqui poderá encontrar uma galeria de imagens da banda,com fotos de concertos,entr...
Css如何实现背景色透明或半透明但内容不透明
12-13
1.针对IE浏览器 复制代码代码如下: .demo{ 　background-color:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26FFFFFF, endColorstr=#26FFFFFF) } 2.针对FF，谷歌等浏览器 复制代码代码如下: .demo{ 　background:transparent;<!–背景透明–> 　color:#fff;<!–字体颜色–> 　background-color:rgba(255,255,255,0.15)<!–最后一个参数设置透
HTML/设置网页背景图片+背景透明度设置
H20200201的博客
04-19 1万+
HTML文件代码 <!DOCTYPE html> <html> <head> <head> <body "> <div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%"> <img src="https://pic.netbian.com/uploads/allimg/200627/004758-15
html，body设置背景色透明
baokx的专栏
06-19 2万+
html，body设置背景色透明 今天在项目的改版中遇到一个问题，div设置的背景图片（蓝色的），其调用的iframe里面的白色背景挡住了div的背景，后来经查看原来是在样式里统一引用了html,body{background:#fff;}       打开firefox看到body的背景色显示是body{background:#fff;}是调用的css里面的，想办法去除，但样式是通用的，
html css背景透明
_23__的博客
09-09 3290
1、background：transparent 2、opacity：0.5； 3、background:rgba(0,0,0,.5);
HTML背景图片透明度设置
热门推荐
JackLiu16的博客
12-18 4万+
html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> title>无标题文档title> style type="text/css"> .STYLE5 {color: #000000} .STYLE7
CSS实现背景图片透明而文字不透明效果的两种方法
12-13
这种方法通过使用 `rgba()` 函数设置背景颜色的透明度来实现。我们为背景图片创建一个父级容器，然后为包含文本的子级容器设置一个带有半透明白色的背景。这样，文字将保持完全不透明，而背景会呈现出透明度。例如...
html+css透明背景
09-07
但是，当为整个元素设置`opacity`时，该元素及其所有子元素都会受到此透明度的影响，包括内容。例如： ```css .box { background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ opacity: 0.5; /* 全元素半...
js+CSS实现弹出居中背景半透明div层的方法.docx
01-19
我们使用 CSS 将背景半透明层的宽度和高度设置为 100%，并使用 filter 属性或 opacity 属性来实现背景半透明效果。 在 JavaScript 中，我们定义了两个函数，pupopen() 和 pupclose()，用于控制背景半透明层和弹出...
html css背景图片透明文字不透明
zouxin_88的专栏
12-19 965
思路：在::before中设置background-image和opacity。
使用IE滤镜实现css3中rgba让背景色透明的效果
weixin_30698297的博客
07-30 69
让背景透明，听上去不是挺容易的么？ 让背景色透明，很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了，OK，看看这个例子。 html: <div class="container" id="container"> <div class="main" id="main"> <labe...
web前端学习（三十）——CSS3图像透明/不透明、拼合技术的相关设置
★★光亭★★
02-10 9944
web前端学习（三十）——CSS3图像透明/不透明、拼合技术的相关设置
html怎样设置body的背景透明,html，body设置背景色透明
weixin_28192383的博客
06-10 3916
html，body设置背景色透明今天在项目的改版中遇到一个问题，div设置的背景图片(蓝色的)，其调用的iframe里面的白色背景挡住了div的背景，后来经查看原来是在样式里统一引用了html,body{background:#fff;}打开firefox看到body的背景色显示是body{background:#fff;}是调用的css里面的，想办法去除，但样式是通用的，只好想别的办法，替换bo...
html设置背景图片透明度
05-31
在HTML中设置背景图片的透明度可以通过CSS中的background-color和opacity属性实现。具体的做法是：先将background-color属性设置为rgba，其中a代表透明度，取值范围为0到1，如下所示： ``` background-color: rgba(255,255,255,0.5); ``` 其中，上面的代码表示将背景颜色设置为白色，并且透明度为0.5，即50%的透明度。 接着，再将opacity属性设置为1，如下所示： ``` opacity: 1; ``` 这样就可以将背景图片设置为透明了。需要注意的是，这种做法只能设置背景图片的透明度，无法针对图片本身进行透明度处理。如果需要对图片本身进行透明度处理，需要使用图形处理软件来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值