精华内容
下载资源
问答
  • HTML背景图片透明度设置

    万次阅读 2017-12-18 20:11:45
    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} ....
    <!DOCTYPE html>
    <html>
    <head>
        {% csrf_token %}
        {% load staticfiles %}
        {% load bootstrap3 %}
        {% bootstrap_css %}
        {% bootstrap_javascript %}

        <title>movie</title>
        <style type="text/css">
            .bodystyle{
            filter:alpha(opacity=20);  
            -moz-opacity:0.2;  
            -khtml-opacity: 0.2;  
            opacity: 0.4;
            height:100%;
            width:100%;
            position:absolute;
            }

            body{text-align:center}
            h1{text-align:center;}
        </style>
    </head>
    <body>
        <div class="bodystyle">

        <img src="{% static "images/3.jpg" %}" width=100% height=100%></div>

        <div style="position:absolute;">

         <h1>The movie space</h1>
        <div >
            <video src="/static/movie/movie.ogg"  width="720px" height="540px" controls="controls">
            Your browser does not support the video tag.
            </video>
        </div>

        </div>
      
    </body>
    </html>
    展开全文
  • 背景图片是 <body background="Background_1280x1024.jpg" ; > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &...
  • 图片作为CSS背景时,如何设置背景图片透明度,让背景图片半透明。纯色背景半透明比较容易,而图片相对属性要稍微复杂些,考虑浏览器兼容和浏览器版本。方法一:直接编辑图片直接将图片在图片编辑软件中(比如PS)编辑...

    图片作为CSS背景时,如何设置背景图片透明度,让背景图片半透明。纯色背景半透明比较容易,而图片相对属性要稍微复杂些,考虑浏览器兼容和浏览器版本。

    方法一:直接编辑图片

    直接将图片在图片编辑软件中(比如PS)编辑出自己想要的半透明效果。

    方法二:利用CSS滤镜

    filter设置图片背景半透明效果,缺点为图片及文字都会出现半透明效果。

    1、对应设置半透明CSS代码:

    filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60;

    2、解释代码:

    filter:alpha(opacity=50); /*支持 IE 浏览器*/

    -moz-opacity:0.50; /*支持 FireFox 浏览器*/

    opacity:0.50; /*支持 Chrome, Opera, Safari 等浏览器*/

    3、实例HTML CSS代码

    filter滤镜设置半透明效果 CSS5

    body{ font-size:16px}

    .book,.book-a{ border:2px solid #333}

    .book{ width:300px; height:100px; background:url(logo.gif)}

    .book-a{ width:300px; height:100px;

    filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60; background:url(logo.gif)}

    学习css在CSS5解决问题和学习不错
    学习css在CSS5解决问题和学习不错

    以上代码可直接拷贝下来,保存HTML后,浏览器测试看看效果。

    4、效果截图

    b0406804591720ef6d1bba42c3fa3b23.png

    CSS滤镜实现半透明

    5、说明

    优点直接对设置背景图片的DIV对象设置半透明滤镜,非常方便。

    缺点,对象内文字内容、边框均跟随实现半透明。

    方法三:纯颜色半透明遮挡【CSS5强烈推荐】

    此方法浏览器兼容性好,图片和内容都能很好分离实现背景图片半透明效果,而文字、边框等样式与内容不受影响。只是多了一层DIV,使用绝对定位样式来实现重叠层叠。

    1、关键代码

    1)、background:rgba(255,255,255,.4)

    设置背景颜色值与透明度。前3个255为代表RGB黑色,.4代表透明度为40%

    这个颜色值可以从PS软件获得。

    63cd33274616251b02b1a655a12bbc0c.png

    这里不再介绍,PS软件获取颜色,根据以上演示图可简单获得【PS获取RGB数值】

    2)、绝对定位

    position:relative、position:absolute; left:0; top:0;

    设置绝对定位让文字DIV放到背景DIV上。

    3)、完整实例代码

    背景图片透明度设置实例_CSS5

    .btmbox{ width:300px; height:100px; background:url(logo.gif)}

    .btmbox-b{ width:300px; height:100px; background:url(logo.gif); position:relative}

    .btmbox-b .qb{ position:absolute; left:0; top:0; width:100%; height:100%;background:rgba(255,255,255,.4);}

    .btmbox-b .qc{ position:absolute; left:0; top:0; width:100%; height:100%;background:rgba(255,255,255,.8);}

    测试半透明案例内容文字
    测试半透明案例内容文字
    测试半透明案例内容文字

    4)、图片背景截图

    195bf12ab1ece733697f729fdfb499f1.png

    设置背景图片和文字层,用文字DIV背景纯色半透明实现遮挡后面背景图片实现图片半透明

    作者:css5原创

    展开全文
  • 我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto!...

    我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。

    .modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto

    !important;width:100%}

    注:

    代码应用的式CSS中的Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不同范围的透明度。具体语法如下:

    {filter:alpha(opacity=#opacity,finishopacity=#finishopacity,

    style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}

    具体参数含义如下:

    “opacity”表示透明度调节,范围在0-100,0表示完全透明,100表示完全不透明。

    “finishopacity” 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到

    100。

    “style” 指定透明区域的形状特征:0 代表统一形状,1

    代表线形,2 代表放射状,3 代表矩形

    “startx” 渐变透明效果开始处的 X坐标。

    “starty” 渐变透明效果开始处的 Y坐标。

    “finishx” 渐变透明效果结束处的 X坐标。

    “finishy” 渐变透明效果结束处的 Y坐标。

    以上的参数可以选用,可以只设置一个opacity

    如果设置成下面代码,就表示背景式半透明的:

    {filter:alpha(opacity=50)}

    展开全文
  • 设置背景图片透明度

    2010-12-06 11:17:00
    可应用至任何控件 1. View v = findViewById(R.id.content);//找到你要设透明背景的layout 的id 2....//0~255透明度值 <br />转自:http://www.eoeandroid.com/thread-24352-1-1.html

    可应用至任何控件
    1. View v = findViewById(R.id.content);//找到你要设透明背景的layout 的id
    2. v.getBackground().setAlpha(100);//0~255透明度值

    转自:http://www.eoeandroid.com/thread-24352-1-1.html
    展开全文
  • 那么这篇文章将详细介绍了这几种背景图片的处理方法。 正如前面所说,仅仅依靠CSS现有的属性,我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果,我们需要借助CSS的其他方法来实现...
  • 关于设置背景图片透明度html+css)

    万次阅读 多人点赞 2018-03-22 16:58:24
    2018.3.22设置背景图片透明度,而不是颜色这种,是图片显示这个就跟某些博客能够换背景图片当主题一样的道理,看了好久终于搞清楚了&lt;body&gt;里面是不能直接设置图片的透明度的需要借助&lt;div&...
  • web中html+CSS修改背景图片的不透明度

    千次阅读 2020-05-04 21:37:15
    在web的开发中,要增加一张背景图片,但是图片不透明度太高看着很不舒服,所以有必要降低图片不透明度。但是在body中增加一张背景图片后,不能直接的修改图片不透明度。用div包裹body内容修改的不透明度是整一个div...
  • Html 层级 透明度 背景图片

    千次阅读 2019-01-23 16:01:08
     * - 如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素  *   * 可以同时为一个元素指定背景颜色和背景图片,  * 这样背景颜色将会作为背景图片的底色  * 一般情况下设置背景图片时都会同时...
  • HTML文件代码 <!DOCTYPE html> <html> <head> <head> <body "> <div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%"> <img src=...
  • 一、背景透明效果复制代码代码如下:a.menu_a_2,a.menu_a_2:link,a.menu_a_2:visited { display:block; width:75px; height:35px; float:left; line-height:35px; text-align:center; color:#FFFFFF; font-weight:...
  • 纯色后盾半透明对照简单,而图片相对属性要略微复杂些,考虑阅读器兼容和阅读器版本。法子一:直接编纂图片直接将图片图片编辑软件中(比如PS)编辑出自身想要的半无色造诣。法子二:哄骗CSS滤镜filter设置装备摆设...
  • 满意答案xiayuwap推荐于 2017.12.15采纳率:51%等级:8已帮助:959人可以设置啊,如图:常见的失败做法最常见的做法...还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。正确Action:登陆bod...
  • 再加上我是想把背景设置为图片,也不打算用处理过的半透明图片,所以最终写成了这样:.back{position: absolute;width: 1500px;height: 1500px;margin-left: 0px;margin-right: 0px;background: url(images/back....
  • 以往我们实现半透明的背景都是采用rgba的方式设置的,这种方法只能设置纯色,不能使用图片,今天我们来学习下利用css来给背景图片设置透明度。css怎么设置背景图片透明度?设置背景图片透明度,而不是颜色,就...
  • 次级div向容器中添加另一个div元素以保存背景。这是最跨浏览器友好的方法,将工作甚至在IE6。HTMLHi thereCSS.myDiv {position: relative;z-index: 1;}.myDiv .bg {position: absolute;z-index: -1...
  • 背景设置透明度

    2015-09-08 14:24:00
    获取背景控件id,xx.getBackground().setAlpha(50);//0~255透明度背景可以为一张图片,也可以是色值。值越小越透明。 转载于:https://www.cnblogs.com/yangcong/p/4791544.html...
  • 如何设置背景透明度

    千次阅读 2018-09-17 20:15:25
    设置背景透明度分为两种:一种背景为颜色设置的纯色背景;另一种是图片背景。 【情况一】纯色背景 关键代码:background:rgba(R,G,B,A) RGB--------三原色(red,green,bule) A-------透明度 关于三原色最终...
  • 一、需求描述某元素,希望background-image背景图片是半透明的,但是,元素里面的其他内容,例如文字,图标之类的还是不透明。如果是纯色背景或者是CSS渐变背景,很好处理,使用rgba或者hsla颜色色值即可。但是,...
  • 方法就是在图片上面加一层DIV,将DIV的背景颜色调成rgba(0,0,0,0.3);即可 转载于:https://www.cnblogs.com/cndotabestdota/p/5673657.html
  • 图片图片上的文字设置不同的透明度的两种方法: 第一种方法:背景图+定位+background: url(timg.jpg)no-repeat; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • blackView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5]; 转载于:https://www.cnblogs.com/huoxingdeguoguo/p/5175714.html
  • 一、css实现背景图片透明,但是内容不透明 想要设置透明度,有两种办法opacity和rgba。但是呢直接使用这两种办法会导致背景图片和内容一起变成透明。所以得换一种思路。 法一: 该方法采用中间层的概念,在背景图和...
  • 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧。 效果展示 半透明 不透明 常见的失败做法 最常见的做法事设置元素的opacity,这种设置出来的效果就是内容...
  • 今天要设计一个定位在图片上的标签,标签的背景要有一定的透明度,使用到了opacity的属性,过去没太注意这个属性的兼容性问题,结果采坑了。。。1.完成后的效果完成前后的效果应该是这样的:背景透明前 背景透明后 ...
  • 回答: 你先找个皮肤之后在用用photoshop制作空间大图模块 Photoshop最大的优势就是强大的图片处理功能。... 一、截取背景图片:通过装扮空间设置好你的空间皮肤以后,就可以截取空间背景图片了。 没有抓图软件...
  • 菜单CSS部分#header{height:60px;background:#fff;background:rgba(255, 255, 255, 0.5) none repeat .../*实现FF背景透明,文字不透明*/opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;width:100%;line...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 278
精华内容 111
关键字:

html背景图片透明度