当前位置:首页 » 风景景观 » css背景色透明度

css背景色透明度

发布时间: 2020-11-22 14:53:52

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);

热点内容
一部国外电影,一个老男人骑个摩托车 发布:2024-08-19 09:13:10 浏览:920
脖子上有睾丸是什么电影 发布:2024-08-19 09:03:17 浏览:374
变形金刚撒谁家的 发布:2024-08-19 08:43:06 浏览:478
美国男电影双胞胎 发布:2024-08-19 08:42:20 浏览:764
黑人橄榄球少年收养电影 发布:2024-08-19 08:25:26 浏览:918
夏目哉大片 发布:2024-08-19 08:09:22 浏览:806
他第一部出演的电视剧是,的英语 发布:2024-08-19 08:07:54 浏览:654
电影检索 发布:2024-08-19 07:48:52 浏览:198
谁有视频 发布:2024-08-19 07:41:55 浏览:141
成龙香港鬼片电影大全 发布:2024-08-19 07:39:46 浏览:223