css背景色透明度
1. 背景图片的透明度如何设置(CSS)
可以设置啊,如图:
常见的失败做法
最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的,严重影响视觉效果。
还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。
正确Action:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登陆</title><style type="text/css">body{background-image:url(images/bird.jpg);background-repeat: no-repeat;background-size:100%;}.login_box::before{content:"";/*-webkit-filter: opacity(50%);filter: opacity(50%); */background-image:url(images/love.jpg);opacity:0.5;//透明度设置z-index:-1;background-size:500px 300px;width:500px;height:300px;position:absolute;//一定要设置position:absolute,这样才能设置z-index,让背景处于内容的下一层top:0px;left:0px;border-radius:40px;}.login_box{position:fixed;left:50%;top:200px;width:500px;height:300px;margin-left:-250px;border-radius:40px;box-shadow: 10px 10px 5px #888;border:1px solid #666;text-align:center;}form{display:inline-block;margin-top:100px;}input{display:block;width:250px;height:30px;background-color: #888;border:1px solid #fee;outline:none;border-radius:10px;}input[type="submit"]{width:100px;height:30x;margin-left: 70px;background-color: #ccc;}span{color:red;font-size:15px;}</style></head><body><div class="login_box"> ... ...2. css怎样仅设置div元素背景透明度,而不设置div元素里面元素的透明度
设置div元素背景透明度,而不设置div里面元素透明度的方法:创建静态页面插入回一个div和十个子div-类选择器和元素答选择器设置div标签-打开浏览器预览-使用nthoftype设置div元素-保存打开浏览器预览。具体方法如下:
1、在openhbuilderx工具中,创建一个新的静态页面并插入一个div和十个子div。
注意事项:
一般来说,我们可以使用CSS的opcity属性来改变一个元素的透明度,但是它的子元素的透明度也会改变,即子元素被重新定义了。例如:<div style="opacity:0.4; background-image:url(...);"><div style="opacity:1.0;">显示文字</div></div>文字元素的透明度也会是0.4。
3. css中,怎么写背景图片的透明度
将一个div设置为绝对定位,在这个div下设置背景图片与改变图片透明度。举例:
html :
...<div id="content"><h1>Hello world!</h1></div> <div id="background"></div>...
css:
#background{ width:100%;height:100%;position:absolute;top:0px;opacity: 0.6;background-image: url(test.jpg);background-size: 500px 500px;}
亲测能看到效果。
4. css怎么调背景图片透明度
不知道你说的背景图片透明度,是不是要将图片变成透明的,好让它和网页颜色契合?
5. DIV 背景色透明,我用CSS代码: filter:alpha(opacity=50);这样写背景是透明了,
<style>
*{ margin:0; padding::0;}
#div1{width:300px; height:200px; position:relative; }
. pos{ background:black; filter:alpha(opacity:30);opacity:0.3; height:100%;position:absolute;width:100%;top:0; z-index:1 }
.box { width:300px; height:20px; background:blue; position:absolute; bottom; top:0;z-index:0; }
</style>
</head>
<body>
<div id="div1">
<div class="pos"></div>
<div class="box">这里是内容部分</div>
</div>
</body>
6. HTML如何给背景颜色设置透明度
问题分析:
HTML的标签可以使用CSS的background-color来设置背景颜色以及透明度。
举例如下:
以下示例将分别演示不透明、50%透明度以及20%透明度的三种不同效果。
HTML代码:
<divid="test-1">
我是黑色背景,不透明的。
</div>
<divid="test-2">
我是黑色背景,50%透明度。
</div>
<divid="test-3">
我是黑色背景,20%透明度。
</div>
CSS代码:
#test-1,#test-2,#test-3{
width:300px;
height:200px;
line-height:200px;
text-align:center;
display:inline-block;
margin-left:50px;
color:#FFF;
}
#test-1{
background-color:rgba(0,0,0,1);
}
#test-2{
background-color:rgba(0,0,0,0.5);
}
#test-3{
background-color:rgba(0,0,0,0.2);
}
页面初始化效果:
7. HTML如何给背景颜色设置透明度
为div添加样式。在<title>标签后面创建一个<style>,在<style>标签里设置rgba类的高
和背景透明度的样式(rgba(R,G,B,A))。透明度参数,取值在0~1之间,不可为负值,
透明度参数越小透明度越高。
#test-1,#test-2,#test-3{
width:300px;
height:200px;
line-height:200px;
text-align:center;
display:inline-block;
margin-left:50px;
color:#FFF;
}
#test-1{
background-color:rgba(0,0,0,1);
}
#test-2{
background-color:rgba(0,0,0,0.5);
}
#test-3{
background-color:rgba(0,0,0,0.2);
}
8. 用css实现div的黑色透明
现在比较稳妥的做法是做一个半透明的黑色PNG图片,然后把它作为背景,因为单纯用CSS来写回,在IE8及以下版本答里面是不生效的。当然如果一定要用CSS来实现的话,也容易,可以直接设置这个元素的透明度,例如下面这样:
background:#000; opacity: 0.8;
也可以直接设置背景色为透明色,例如:
background:rgba(0,0,0,0.8);
这也是楼上的方法,相对而言这个方法还是比较简洁的,只是会遇到一点点浏览器兼容的问题罢了。
9. CSS如何定义DIV背景半透明颜色
“长城郭靖”回答的是错的,他答的是让整个元素半透明
只让背景半透明只有一专个办法,就是用rgba颜色属,代码如下
background:rgba(0,0,0,0.5)
解释:这是黑色半透明的代码
前三个值表示颜色的red,green,blue值
最后一个表示alpha值,就是透明度值,不透明为1
(支持IE8+以及所有现代浏览器)
还是不懂的话,可以参考 网络 “rgba”词条 和 “CSS 颜色值”词条
10. CSS中背景颜色透明度如何设置
opicaty:50; // 0-100为透明值 100为不透明
不过,ie8及以下不识别,
所以要针对它们再写一句
filter:alpha(opacity=50);