精华内容
下载资源
问答
  • web中html+CSS修改背景图片不透明度

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

    在web的开发中,要增加一张背景图片,但是图片不透明度太高看着很不舒服,所以有必要降低图片不透明度。但是在body中增加一张背景图片后,不能直接的修改图片不透明度。用div包裹body内容修改的不透明度是整一个div的。所以我个人的想法是采用一个div添加背景图片,直接让这张图片充满整个页面,而不是跟随着body内容大小设置背景图片。代码如下:
    html代码:

    <div class="my-background"></div>
    

    css代码:

    .my-background{
        position: fixed;
        height: 100%;
        width: 100%;
        background-image: url("../images/moroccan-flower.png");
        opacity: 0.3 ;
    }
    

    position设置为fixed,会固定在屏幕位置,根据height和width设置背景图片大小。如果将position改为absoluted,则最后只会根据屏幕的大小充满屏幕,对于屏幕下方的内容不会进行填充。
    opacity为设置div的不透明度。因为div内没有放置内容,所以只会修改背景图片的不透明度,不会影响到内容。

    展开全文
  • 背景图片设置透明度改变内容

    千次阅读 2019-05-07 12:13:19
    想到透明度自然就想到了css的opacity: 0.5;但是如果就这样设置的话,会...把图片设置透明度(这是通过本地图片设置背景图片,详情参考设置背景图片),而整个div设置 <view class='item'> <image cla...

    想到透明度自然就想到了css的opacity: 0.5;但是如果就这样设置的话,会导致整个div所有内容都变成透明的。如下图:

    img

    那么如何实现只让背景图片透明呢?

    1557200346335

    方法一

    弄一个透明的背景图片哈哈哈哈

    方法二

    把图片设置透明度(这是通过本地图片设置背景图片,详情参考设置背景图片),而整个div不设置

    <view class='item'>
    	<image class='back' src='/images/mother.jpg'></image>
    </view>   
    
    .item{
      width: 90%;
      margin-left: 5%;
      margin-top: 20rpx;
      height: 200rpx;
      position: relative;
      overflow: hidden;
      border-radius: 10rpx; 
    }
    .back{
      width: 100%;
      position: absolute;
      z-index: -1;
      opacity: 0.2;
    }
    

    方法三

    这个方法和上面的差不多的意思,两个div一个设置透明度,总的不设置

    <view class="container">
      <view class='bg'></view>
      <!-- <image src='../image/1.jpg'></image> -->
      <view class='up'>
        ssssssadmn
      </view>
    </view>
    
    .container{
      width: 100%;
      height: 600rpx;
      margin: 0;
      padding: 0;
      position: relative;
    }
    .bg{
      width: 100%;
      height: 600rpx;
      position: absolute;
      background: url(https://note.youdao.com/yws/api/personal/file/6D19FC418F2A4693848568E9BFEE079F?method=download&shareKey=7c8b37fbf4504210dcbcd725f63bd85a);
      background-size: cover;
      opacity: 0.5
    }
    

    方法四

    使用伪类before,设置背景透明度,

      <view  class="demo1">背景图</view>
    
    .demo1{
        width: 500px;
        height: 300px;
    }
    .demo1:before{
        background: url(http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg) no-repeat;
        background-size: cover;
        width: 500px;
        height: 300px;
        content: "";  /* 这个不要漏了 */
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1; /*-1 可以当背景*/
        opacity: 0.5
    }
    
    展开全文
  • 关于设置背景图片透明度html+css)

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

    2018.3.22

    设置背景图片的透明度,而不是颜色这种,是图片显示

    这个就跟某些博客能够换背景图片当主题一样的道理,看了好久终于搞清楚了

    <body>里面是不能直接设置图片的透明度的

    需要借助<div>

    <style type="text/css">
    .bodystyle{
    filter:alpha(opacity=50);  
    -moz-opacity:0.5;  
    -khtml-opacity: 0.5;  
    opacity: 0.5;
    width:100%;
    position:absolute;
    background:url(图像/8.JPG) ; 
    background-attachment:fixed;
    }
    </style>

    需要在之前就写好,用类的方法表示。

    <body >
    <div class="bodystyle"></div>
    </body>

    然后在div中引用这个类,就可以实现图片透明度设置

    但是这样也有问题,如果中间有文本存在的话就会也变为透明字体,而且要当背景图片的话就需要将文本放入两个<div>中间

    所以需要在css中设置文本的字体透明度

    opacity: 1;

    即可

    展开全文
  • html中如何设置背景背景颜色的透明度

    html中如何设置背景和背景颜色的透明度


           html中设置背景和背景颜色的透明度有两种方式:

           1.通过rgba方式设置

            例如: background:rgba(0,0,0,.5);

            优点:可对任意颜色设置透明度

            缺点:存在兼容性问题:针对IE9以下浏览器不兼容

           2.通过backgroud和opacity设置

            例如:background:#000000;

                       opacity:0.6;

            优点:兼容性好

            缺点:只针对于背景颜色设置透明度。


    展开全文
  • Html 层级 透明度 背景图片

    千次阅读 2019-01-23 16:01:08
     /*设置背景图片不重复*/  background-repeat: no-repeat;    }    .btn:hover{    /*  * 当是hover状态时,希望图片可以向左移动  */    background-position: -93px 0px;    }    ...
  • CSS设置背景透明度

    万次阅读 多人点赞 2018-04-16 09:05:53
    实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)IE...
  • 我想给整个页面做个半透明背景 HTML+CSS+JS 求教
  • 1.通过rgba方式设置 例如: background:rgba(0,0,0,.5); 优点:可对任意颜色设置透明度 缺点:存在兼容性问题:针对IE9以下浏览器兼容 2.通过backgroud和opacity设置 ...缺点:只针对于背景颜色设置透明度。 ...
  • DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <title></title> 6 ...
  • css实现背景图片半透明内容不透明的方法 ...方法一:设置background-color:rgba(),这种方式只能设置背景颜色的透明度。 如果是背景是图片的上面的方法将就适用,以下提供两个方法: 第一个就是利用伪元素::before,
  • 图片图片上的文字设置不同的透明度的两种方法: 第一种方法:背景图+定位+background: url(timg.jpg)no-repeat; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • css 设置背景图片透明

    千次阅读 2019-06-24 17:44:00
    背景图片css不变,再背景图片的里层元素设置css样式即可 opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ 转载于:https://www.cnblogs.com/jiangfeilong/p/11078431.html...
  • 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专属...
  • div 背景颜色透明度设置

    千次阅读 2013-09-16 14:35:55
    div设置背景颜色透明度    通常我们通过div的style样式属性filter来设置div的背景透明样式。可根据alpha提供的如下参数进行组合控制 filter: Alpha ( enabled=bEnabled , style=...
  • HTML设置背景透明

    万次阅读 2018-03-03 21:54:54
    今天看视频最后作业是 设置一个...后来我就百度想让背景透明前面的诗不透明后来发现真的有 我就介绍了 直接贴图 因为图我保存了 图更直观这个就很直观 定义背景颜色 然后是直接用这个背景颜色的元素设置backgro...
  • css背景图片加上半透明背景颜色

    千次阅读 2017-04-26 18:57:00
    背景图片加上半透明背景颜色 background: rgba(0, 0, 0, .6) url(../../images/pro-bg.png) no-repeat center center; 转载于:https://www.cnblogs.com/silences/p/6770210.html
  • 背景透明度如何设置一个div的背景透明度 来源:互联网 作者:佚名 时间:12-31 16:55:48 【大 中小】 如何设置一个div的背景透明度,对于一些新手朋友有些陌生,接下来详细介绍实现方法,有需要了解的朋友可以...
  • VSCode 设置透明背景,解决透明度的问题但这个方法有点个确定,就是透明度的问题,照片透明度越高,那么字体的透明度也高,导致代码或者菜单选项看清 网上找到的大多数教程都是使用这个方法 /*background start*...
  • 给定了一张图片,用HTML5在图片的下方放置一行字(注意:字是在图片上的),而且字的背景透明的(注意:图片不是透明的,也不要透明)。最终效果是这样的:你可以清清楚楚看到在整张图片的下方有一行透明背景,...
  • 关于div设置背景颜色透明度

    千次阅读 2014-06-11 14:32:45
    通常我们通过div的style样式属性filter来设置div的背景透明样式。可根据alpha提供的如下参数进行组合控制: filter: Alpha ( enabled=bEnabled , style=iStyle , opacity=iOpacity , finishOpacity=iFinishOpacity ...
  • HTML 使用CSS 设置透明度Opacity

    千次阅读 2016-06-29 19:04:20
    Html/Css标签透明度效果的实现,在html中,实现半透明背景,在HTML Div+Css编程中,为了实现版透明,通常有3中做法。 第一种是HTML5的透明,在H5中支持透明背景颜色,但遗憾的是,H5中的办透明背景颜色只支持 rgba...
  • SVG图片背景透明

    千次阅读 2017-02-09 17:05:00
    今天在调整网页的时候,将logo以原有直接贴代码形式,改为加载文件。 其实真正的目的是做SEO。上次SEO交流后得出 结论:核心在于...当时使用这种并友好的方法,是因为采用原有方式加载SVG文件显示,然后才将...
  • 为啥加两个背景图呢,因为这样的布局最开始是给一个矩形框加上的背景图片,若是还使用矩形框,则实现透明状态的效果就无法实现,这样加上背景也就毫无意义。其次:也是最主要的一个步骤,至少需要里外两层div,且两层...
  • Qt中通过Qpixmap设置图片透明度

    千次阅读 2019-09-06 13:58:13
    最近看到美图秀秀的一些功能,可以手动设置图片透明度并显示在其它图片上,所以自己动手做了个小Demo,实际效果如下: (图片仅供参考使用) 可以看到拖动下方进度条,可以控制左上角图片透明度。 方法如下...
  • 在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法。 在css中设置背景颜色透明的方法有两种...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,500
精华内容 18,200
热门标签
关键字:

html背景图片不透明度