精华内容
下载资源
问答
  • left:0px; top:0px; width:100%; height:100%;opacity:0.8"> <img src="https://pic.netbian.com/uploads/allimg/200627/004758-15931900782589.jpg" width="100%" height="100%"/> div> body> ... opacity:设置透明度

    HTML文件代码

    <!DOCTYPE html>
    <html>
    <head>
      <head>
      <body >
        <div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%;opacity:0.8">
        <img src="https://pic.netbian.com/uploads/allimg/200627/004758-15931900782589.jpg" width="100%" height="100%"/>
        </div>
        </body>
    </html>
    

    说明:
    position:fixed——生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    opacity:设置透明度

    展开全文
  • CSS控制网页背景透明度

    万次阅读 2018-06-02 20:02:30
    1.实现方法(3种),以不透明度为50%为例 ①CSS3的opacity:X X的取值范围:0~1 如:opacity:0.5; ②CSS3的rgba(red,green,blue,alpha) alpha的取值范围:0~1 如:background:rgba(255,255,255,0.5); ③IE专属...

    1.实现方法(3种),以不透明度为50%为例

        ①CSS3的opacity:X
           X的取值范围:0~1
           如:opacity:0.5;
        ②CSS3的rgba(red,green,blue,alpha)
           alpha的取值范围:0~1
           如:background:rgba(255,255,255,0.5);
        ③IE专属滤镜filter:Alpha(opacity=X)
           X的取值范围:0~100

           如:filter:Alpha(opacity=50)

    2.调整布局模块的整体透明度

    <!DOCTYPE html>
    <html>
      <head>
            <meta charset="utf-8">
            <title>CSS3的opacity</title>
    		<style>
    			*{
    				padding: 0;
    				margin: 0;
    			}
    			body{
    				padding: 50px;
    				background: green;
    			}
    			.test{
    				padding: 20px;
    				background-color:#000000;
    				opacity: 0.2;
    			}
    			.test p{
    				color: #FFFFFF;
    			}
    		</style>
    	</head>
    	
    	<body>    
    
    		<div class="test">
    			<p>背景透明,文字也透明</p>
    		</div>
    
    </html>
    

    效果:

    3.父元素的样式参数设置,不会改变子元素的样式
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>背景透明,文字不透明</title>
    		<style>
    		*{
    			padding: 0;
    			margin: 0;
    		}
    
    		body{
    			padding: 25px;
    			background: green;
    		}
    
    		.test{
    			padding: 25px;
    			background-color: rgba(0,0,0,0.5);
    		}
    		.test p{
    			color: #FFFFFF;
    		}
    		
    		<!-- .test{
    			background-color:#000000;
    			filter:Alpha(opacity=50);
    			position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
    			*zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
    		}
    		.test p{
    			position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */
                            color:#FFFFFF;
    		}  -->
    	}
    
    		</style>
    	</head>
    	<body>    
    
    		<div class="demo">
    			<p>背景透明,文字不透明</p>
    		</div>
    		
    	</body>
    </html>

    效果:


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

    万次阅读 2017-12-18 20:11:45
    html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text... charset=gb2312" /> title>无标题文档title> style type="text/css"> .STYLE5 {color: #000000} .STYLE7
    <!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>
    展开全文
  • 我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的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)}

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

    千次阅读 2018-12-21 17:01:32
    div{ position:relative; background-color: #eee;  background: -moz-linear-gradient(30deg, #eff8fd 0%, #f0f9fe 40%, #c4e2fe 80%, #9cbee6 100%); background: -webkit-linear-gradient(30deg, #eff8fd 0%, #f...
  • 一、设置首页主体部分(中、下部所有模块)的背景颜色半透明设置 说明:rgba()方法只适用非IE类浏览器。   设置的代码如下: &lt;style type=text/css&gt;.main{background:rgba(255, 255, 255, ...
  • 关于设置背景图片透明度(html+css)

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

    千次阅读 2017-10-04 08:53:31
    c#改变图片透明度,透明度参数alpha的取值范围为0-255测试函数static void Main() { Bitmap b = file2img("test.jpg"); Bitmap bb = img_alpha(b,200); img2file(bb, "test1.jpg"); }改变透明度的函数pub
  • web中html+CSS修改背景图片的不透明度

    千次阅读 2020-05-04 21:37:15
    在web的开发中,要增加一张背景图片,但是图片不透明度太高看着很不舒服,所以有必要降低图片不透明度。但是在body中增加一张背景图片后,不能直接的修改图片不透明度。用div包裹body内容修改的不透明度是整一个div...
  • DIV半透明实现,使用CSS实现DIV成半透明效果,CSS实现层与背景透明效果。 一、DIV CSS半透明基础介绍 - 设置DIV半透明CSS代码: div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity:0.5;} 说明: 1、...
  • 如何设置背景透明度

    千次阅读 2018-09-17 20:15:25
    设置背景透明度分为两种:一种背景为颜色设置的纯色背景;另一种是图片背景。 【情况一】纯色背景 关键代码:background:rgba(R,G,B,A) RGB--------三原色(red,green,bule) A-------透明度 关于三原色最终...
  • public static void processPNGTransparency(String fromFile, int fromW, int fromH, String toFile, int toW, int toH) { try { BufferedImage to = new BufferedImage(toW, toH,...
  • Html 层级 透明度 背景图片

    千次阅读 2019-01-23 16:01:08
     * 背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就需要单独的发送一次请求,  * 但是我们外部资源并不是同时加载,浏览器会在资源被使用才去加载资源  * 我们这个练习,一上来浏览器只会...
  • 网页透明背景设置

    千次阅读 2019-01-16 16:29:43
    前端案例技术总结 ...图的透明度: img{ opacity: 1; } img{ opacity: 1; }图的透明度,注销前如下图所示: img{ opacity: 1; }图的透明度,注销后如下图所示: 图片和div融合在一起: div#div1{ posi...
  • 网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法。 在css中设置背景颜色透明的方法有两种...
  • 设置背景透明度

    千次阅读 2018-08-28 17:12:08
    1.background-color: rgb(0, 0, 0, 0.5); 第一种微信页面可能失效 2.opacity:0.75;  background-color: #333; 使用opacity时: ...当父级元素设置属性为 .opacity{background: #000;...这种写法就算给子元素opacity_...
  • 大家都知道,网页经常要用到一些图片去覆盖另外一些图片,来做出效果,但是顶层图片背景如果不是透明的,将无法和后面的图片进行融合。 解决办法,抠图,用PS把图片背景 白色--》网格(透明), 除此之外,你...
  • sublime 设置背景透明度

    千次阅读 2016-04-26 12:18:13
    开头今天看到有些大神的编辑器半透明...下载sublime 透明背景插件我用的是git下载插件:git clone https://github.com/vhanla/SublimeTextTrans.git然后,打开sublime 选项卡 Preferences -> browse Packages 将下载的
  • 图片图片上的文字设置不同的透明度的两种方法: 第一种方法:背景图+定位+background: url(timg.jpg)no-repeat; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • 我想给整个页面做个半透明背景 HTML+CSS+JS 求教
  • 背景渐变如何设置透明度 项目最近这几天正在做不同主题的颜色配置方案,要根据用户输入的颜色来配置整个主题的颜色,让人头疼的是,其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变,也就是说,要...
  • 参考网页: http://www.divcss5.com/jiqiao/j768.shtml http://www.w3school.com.cn/h.asp 通过前段时间的努力,终于实现了手机和PC机访问同一网址呈现不同页面的效果,这里面主要涉及到一些PHP,SAE的用法,以后有...
  • 程序使用java语言编写,工作原理是取图片边缘的像素点作为要替换的背景色,然后将所有像素点与该颜色进行比较,发现相同则将颜色不透明度设置为0,使颜色完全透明。 下面是一个在线版:   一、访问图片去底工具...
  • JS使png背景图片透明

    千次阅读 2008-09-25 11:17:00
    png图片有很好的品质,阴影效果也不会有杂边,很流畅。... 但目前IE中对于插入的透明背景的png的图片是不能正常显示的,IE会自动给".png"格式的图片加个灰色背景。解决这个的方法是增加javascript,具体方法有
  • 1、使用css的background-color属性:background-color:transparent;2、使用滤镜(兼容ie和ff等): {filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;} 管理员在2009年8月13日编辑了该文章文章。...
  • 透明圆角化背景图片

    2016-04-05 21:50:44
    在上面的案例中,我只给出最为原始的圆角框模型,它还是存在一些不足之处。...就是将背景图片也圆角化,好像目前在网络上还没有这样的功能应用,我只见过用js方式来实现的,可以参看我的《超圆滑
  • 网页背景图片代码

    万次阅读 2009-07-17 19:37:00
    网页背景图片代码1.(最普遍类)body{background-image:url(logo.gif);background-repeat:no-repeat;background-position:center}说明:以上代码为网页背景图片固定代码!网页背景图片固定代码,这样,当向下拉网页时,...
  • 背景图 + 伪类 + flite:blur(3px) .demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:before{ background: url(http://csssecrets.io/images/tiger.j...
  • 网页中的不透明度

    2009-06-02 12:04:00
    既可以是图片也可以是背景色: filter:alpha(opacity=80); background-color: #d7d9da;filter:Alpha(opacity=80);
  • SVG图片背景透明

    千次阅读 2017-02-09 17:05:00
    今天在调整网页的时候,将logo以原有直接贴代码形式,改为加载文件。 其实真正的目的是做SEO。上次SEO交流后得出 结论:核心在于内容的本身的优化。信噪比很重要。也就是有效信息需要占文章的主要内容,相关信息太...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,729
精华内容 9,891
关键字:

网页背景图片透明度