精华内容
下载资源
问答
  • CSS背景半透明

    2016-06-17 11:00:20
    如何做到CSS背景半透明呢,秘诀就是使用两层背景。  底层是图片,上一层是一个透明度是0.5的黑色图层,就像加了滤镜一样。两层用z-index分辨。 代码如下: div{border:black solid thin;height:500px;width:...

     如何做到CSS背景半透明呢,秘诀就是使用两层背景。

     底层是图片,上一层是一个透明度是0.5的黑色图层,就像加了滤镜一样。两层用z-index分辨。

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    div{border:black solid thin;height:500px;width:300px;}
    .back{background-image:url(myphoto.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size: cover;z-index: -99}
    .myba{background-color: rgba(0,0,0,0.5);z-index: -98}
    .myba:hover{background-color: rgba(0,0,0,0.2);z-index: -96;border:white solid thin;font-size: 2em;}
    p{font-family: myFirstFont;color: white;text-align:center;margin-top: 80px;}
    p:hover{font-family: myFirstFont;color: white;text-align:center;margin-top: 80px;}
    </style>
    </head>
    <body>
    	<div class="back">
    		<div  class="myba">
    	<p>嘿嘿</p>
           </div>
       </div>
    </body>	

    展开全文
  • css 背景半透明最佳实践css 背景半透明最佳实践css 背景半透明最佳实践css 背景半透明最佳实践
  • CSS背景半透明效果

    千次阅读 2014-03-27 18:41:34
    说到CSS透明效果可以使用如下方式: 1. opacity属性设置:例如opacity:0.7,而低版本的IE浏览器不直接支持这个属性,但是可以使用滤镜filter:alpha(opacity:70)来达到效果。 例如:.box{width:100px;height:...

    说到CSS的透明效果可以使用如下方式:

    1. opacity属性设置:例如opacity:0.7,而低版本的IE浏览器不直接支持这个属性,但是可以使用滤镜filter:alpha(opacity:70)来达到效果。         

    例如:.box{width:100px;height:100px;background:#000;opacity:.7;*filter{opacity:70}}

    如果使用此方式,有个副作用,半透明效果子类标签里面的文字也会受到影响,一样有透明效果,因为有继承关系。

           2.使用 background:rgba(0,0,0,.7),低版本ie则使用滤镜filter的渐变效果,2者都不会继承.

    .box{

    width:100px;

    height:100px;

    background:rgba(0,0,0,.7);

    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#CC000000, endcolorstr=#CC000000);

    }

    但是IE9对这2个属性都支持,所以效果会重叠。可使用一个HACK方式解决。

    :root.box{

    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000, endcolorstr=#00000000);

    }

    使用一些其他HACK好像效果无用(例如\9  ,无奈中,有知道的朋友可以留言噢。)

    这样文字就不会有透明效果了。如果这个层加了绝对定位,低版本的IE又坑爹了,居然会穿透层。

    那么就得加上这么一句background: url(about:blank) transparent\9; 记得加在background:rgba()上面。因为IE10也会识别\9这个hack。如果放在下方IE10背景就没了。

    所以最后的代码:

    .box{

    width:100px;

    height:100px;

    background: url(about:blank) transparent\9; 

    background:rgba(0,0,0,.7);

    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#CC000000, endcolorstr=#CC000000);

    }

    :root .box{

    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000, endcolorstr=#00000000);

    }

    如果有更好的实现方式,欢迎大家留言,多交流。


    展开全文
  • html>  lang="en">    charset="UTF-8">    IE背景半透明    type="text/css">  

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.         <head>
    4.                 <meta charset="UTF-8">
    5.                 <title>
    6.                         IE背景半透明
    7.                 </title>
    8.                 <style type="text/css">
    9.                 .alpha{
    10.                         width: 100px;
    11.                         height: 100px;
    12.                         color: #fff;
    13.                         background: rgba(0, 0, 0, .3);
    14.                         filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #50000000, endColorstr = #50000000)\9;
    15.                 }
    16.                 :root .alpha{
    17.                         filter: none;           /*for IE9*/
    18.                 }
    19.                 </style>
    20.         </head>
    21.         <body>
    22.                 <div class="alpha">
    23.                         文字文字
    24.                 </div>
    25.         </body>
    26. </html>



    =======================签 名 档=======================

    原文地址(我的博客):http://www.clanfei.com/2013/07/1714.html
    欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
    =======================签 名 档=======================




    展开全文
  • 这篇文章主要介绍了关于css实现背景半透明文字不透明的效果示例,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下本文介绍了css实现背景半透明文字不透明的效果示例,分享给大家,具体如下:效果如下...

    这篇文章主要介绍了关于css实现背景半透明文字不透明的效果示例,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

    本文介绍了css实现背景半透明文字不透明的效果示例,分享给大家,具体如下:

    效果如下:

    c93fa3ae6ae6fc670b380fc95632b80a.png

    html{

    background: #6a8db1;

    }

    .aside{

    background-color:rgba(244,251,251,0.47);

    border: 1px solid #FFFFFF;

    width: 200px;

    text-align: center;

    color: #FFFFFF;

    }

    .aside p{

    height: 55px;

    border-bottom: 1px solid #FFFFFF;

    line-height: 55px;

    }

    .aside p font{

    font-weight: 800;

    }

    .aside p span{

    font-weight: 800;

    margin-left:18px;

    }

    留置室1

    10人

    留置室1

    4人

    留置室1

    12人

    留置室1

    6人

    留置室1

    8人

    颜色可根据调色板自行调色

    aff0173215c72ac7e2212ba236f02f47.png

    以上就是本篇文章的全部内容了,更多相关内容请关注PHP中文网。

    相关推荐:

    展开全文
  • DIV半透明实现,使用CSS实现DIV成半透明效果,CSS实现层与背景半透明效果。 一、DIV CSS半透明基础介绍 - 设置DIV半透明CSS代码: div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity:0.5;} 说明: 1、...
  • css中设置背景半透明效果可以使用opacity属性,该属性用来设置元素的不透明级别,如【opacity:0.5】,表示将元素设置为半透明状态。本文操作环境:windows10系统、css 3、thinkpad t480电脑。在css中如果要设置元素...
  • 本篇文章主要介绍了css实现背景半透明文字不透明的效果示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • CSS背景颜色半透明

    2020-08-15 09:34:01
    <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...背景颜色半透明</title> <style> div{ width: 300px; hei
  • 这篇文章主要介绍了js+CSS实现弹出居中背景半透明div层的方法,涉及javascript操作弹出div层的操作技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法。分享给大家供...
  • 在某些情况下可能会需要背景半透明文字不透明这样的效果,实现起来并不复杂,通过滤镜便可做到,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助
  • CSS半透明背景

    2019-09-28 08:46:44
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景半透明例子</title> <style> body { background-...
  • 想不想要自己的主页链接很炫呢,背景半透明的链接效果,空链接实现的链接效果,只需要定义一个特效式的CSS样式即可以实现,在需要实现的地方应用定义的CSS样式,也可以全站应用哦,快去试一下吧,这样的效果可以应用...
  • 现在很多网站都喜欢用半透明的效果显示内容,让人看起来很舒服,不像实色背景看起来那么厚重,但是我们写效果的时候都是希望半透明只作用在背景上,所以经过试验,总结了几种让背景半透明,而文字不半透明的效果,...
  • 如何用CSS实现背景半透明效果?做过活动页面的同学可能会碰到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容。不过假如你只需求在IE...
  • DIV半透明实现,应用CSS实现DIV成半通明成效,CSS实现层和后台半透明成效。一、DIV CSS半透明根本引见设置装备摆设DIV半通明CSS代码:div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity:0.5;}注明: 1、filter...
  • CSS实现网页背景半透明 使用DIV+CSS实现层与背景半透明效果。 说明:  1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认  2、-moz-opacity:对...
  • 一款精美的css3半透明遮罩背景lightbox图片展示特效,这个lightbox效果共有三种展示图片的效果:渐隐效果,淡入淡出效果和全屏放大在缩小效果。
  • CSS半透明背景

    2019-10-16 11:02:59
    代码示例 <!DOCTYPE html> <html> <head> <title>半透明背景示例</title> <style type="text/css"> #content { background:rgba(0, 0, 0...
  • 二、背景半透明 这里要分两个div,一个单独设置背景透明度,另外一个放内容 margin-top:-33px;使用这个方法让文字叠加在透明背景图上。 css:  .bg{ width: 1000px; height:33px;background-color:#fff
  • 原文链接:CSS实现背景半透明效果 HTML <div class="alpha1">  <div class="ap2">  <p>背景为红色(#FF0000),透明度20%。</p>  </div> </div> CSS ...
  • 纯色背景半透明比较容易,而图片相对属性要稍微复杂些,考虑浏览器兼容和浏览器版本。方法一:直接编辑图片直接将图片在图片编辑软件中(比如PS)编辑出自己想要的半透明效果。方法二:利用CSS滤镜filter设置图片背景...
  • 设置背景半透明,文字不透明效果 一、常见的错误做法 最常见的做法就是: 1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的,严重影响视觉效果。 2.设置background-color:rgba(),这种方式只能...
  • 本文介绍了css实现背景半透明文字不透明的效果示例,分享给大家,具体如下:效果如下:html{background: #6a8db1;}.aside{background-color:rgba(244,251,251,0.47);border: 1px solid #FFFFFF;width: 200px;text-...
  • 主要介绍了纯css实现背景图片半透明内容不透明的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了js+CSS实现弹出居中背景半透明div层的方法,涉及javascript操作弹出div层的操作技巧,非常具有实用价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,518
精华内容 5,407
关键字:

css背景半透明