css背景图片透明度,css背景图片透明度怎么设置

css常见技巧-雪碧图、背景、居中、透明度

CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。

作用：

作用：background-size设置 背景图像的大小尺寸 。

一、margin和width实现水平居中

优点： 实现方法简单易懂，浏览器兼容性强；

缺点： 扩展性差，只能针对已知宽度的div，无法自适应未知项情况。

)

二、inline-block实现水平居中方法

做点： 简单易懂，扩展性强；

缺点： 需要额外处理inline-block的浏览器兼容性。

1）、opacity作用于元素以及元素内的 所有内容的透明度 ，子元素会继承父元素的 opacity 属性。

2）、rgba()只作用于元素的颜色或其背景色，后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。

背景图片的透明度如何设置（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" ... ...

css透明度 css图片透明度设置方法

在一些网站的登录页面上，经常可以发现，一张图片叠加在另一张图片上，底层的图片若隐若现，利用css中的透明属性opacity可以实现这种效果，下面就简单介绍一下怎么写代码

新建一个HTML文件，下载两张图片，如下图，放在一个文件夹中，避免出现路径问题

代码示例如下，主要利用css伪元素::before，F_box为前置层，浮于背景上方

下面简单分解下代码，分为1，2，3，第一部分，设置背景图片001.jpg；第三部分，固定前置层图片002.jpg的位置；第二部分，利用伪元素：：before，设置属性opacity来调节透明度，取值为0-1，0是全透明，即看不见的效果，1是全不透明

代码示例中，设置opacity为0.5，半透明状态，实际页面效果如下

css里怎么给背景图片变透明点 给图片的div加什么代码才能实现呢

1、新建html文档，在body标签中添加一个img标签，这时默认情况下图片是不透明的：

2、在head标签中添加style标签，在style标签中为img标签设置透明度样式，其中三个属性是为了兼容不同浏览器：

3、刷新浏览器中的页面，这时可以发现浏览器中图片的透明度改变了，透明度的范围是0-1，0表示完全透明，1表示不透明：

css怎么调背景图片透明度

说明一下，

背景图片是调整不了透明度的，你只能调整容器的透明度来实现容器内的背景，内容也出现透明度。

style

#box{

width:200px;

height:200px;

background:url(背景路径);

opacity:0.5;

filter:"alpha(opacity=50)";

-ms-filter:"alpha(opacity=50)"; /* 旧版IE */

}

/style

div id=box/div