精华内容
下载资源
问答
  • 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧。 效果展示 半透明 不透明 常见的失败做法 最常见的做法事设置元素的opacity,这种设置出来的效果就是内容...
  • CSS实现背景图片透明,文字不透明效果的两种方法 项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果: 背景图 + 伪类 + flite:...
  • CSS 背景(background)CSS 可以添加背景颜色和背景图片,以及来进行图片设置。background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment...

    CSS 背景(background)

    CSS 可以添加背景颜色和背景图片,以及来进行图片设置。

    background-color

    背景颜色

    background-image

    背景图片地址

    background-repeat

    是否平铺

    background-position

    背景位置

    background-attachment

    背景固定还是滚动

    背景的合写(复合属性)

    background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

    背景图片(image)

    语法:

    background-image : none | url (url)

    参数:

    none :  无背景图(默认的)

    url :  使用绝对或相对地址指定背景图像

    background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。

    小技巧: 我们提倡 背景图片后面的地址,url不要加引号。

    背景平铺(repeat)

    语法:

    background-repeat : repeat | no-repeat | repeat-x | repeat-y

    参数:

    repeat :  背景图像在纵向和横向上平铺(默认的)

    no-repeat :  背景图像不平铺

    repeat-x :  背景图像在横向上平铺

    repeat-y :  背景图像在纵向平铺

    设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。

    repeat-x :  背景图像在横向上平铺

    repeat-y :  背景图像在纵向平铺

    设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。

    背景位置(position)

    语法:

    background-position : length || length

    background-position : position || position

    参数:

    length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位

    position :  top | center | bottom | left | center | right

    说明:

    设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。

    如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

    注意:

    position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。

    如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

    实际工作用的最多的,就是背景图片居中对齐了。

    背景附着

    语法:

    background-attachment : scroll | fixed

    参数:

    scroll :  背景图像是随对象内容滚动

    fixed :  背景图像固定

    说明:

    设置或检索背景图像是随对象内容滚动还是固定的。

    背景简写

    background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:

    background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

    background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

    背景透明(CSS3)

    CSS3支持背景半透明的写法语法格式是:

    background: rgba(0,0,0,0.3);

    最后一个参数是alpha 透明度 取值范围 0~1之间

    注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。

    展开全文
  • css实现背景图片透明

    万次阅读 2019-02-14 13:29:29
    背景色,实现透明css方法通常有以下3种方式,以下是不透明度都为80%的写法 css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255...

    纯背景色,实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法

    • css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8
    • css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)
    • IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)

    背景图片想要直接一个属性完成,并没有,只能曲线救国,这里先整理思路,后续补代码

    两层DIV嵌套,外层设置背景图片,设置透明度,内层DIV放置内容,参考上面的透明度写法

     

    展开全文
  • CSS实现背景图片透明

    2020-04-27 11:48:21
    项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1{ width: 500px; height: ...

    项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。

    1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px)


    .demo1{
        width: 500px;
        height: 300px;
        line-height: 50px;
        text-align: center;
    }
    .demo1:before{
        background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;
        background-size: cover;
        width: 500px;
        height: 300px;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;/*-1 可以当背景*/
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }
    <div class="demo1">背景图半透明,文字不透明<br />方法:背景图+ filter:blur</div>

     

     

    2.半透明效果:背景图 + 定位 + background:rgba(255,255,255,0.3)、

    .demo2-bg{
        background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;
        background-size: cover;
        width: 500px;
        height: 300px;
        position: relative;
    }
    .demo2{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 500px;
        height: 300px;
        line-height: 50px;
        text-align: center;
        background:rgba(255,255,255,0.3);
    }
    <div class="demo2-bg">
        <div class="demo2">背景图半透明,文字不透明<br />方法:定位+ background:rgba(255,255,255,0.3)</div>
    </div>


     

    展开全文
  • 一款创意十足的CSS3模糊背景图片透明遮罩动画特效,遮罩区域高亮显示背景图片左右滚动动画效果。
  • CSS两张图片叠加透明显示特效是一款使用 css blend-mode属性制作两张图片混合,一张背景图片和人物图片叠加透明显示效果。
  • div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示
  • 那么这篇文章将详细介绍了这几种背景图片的处理方法。 正如前面所说,仅仅依靠CSS现有的属性,我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果,我们需要借助CSS的其他方法来实现...
  • css如何设置背景图片透明

    千次阅读 2021-08-04 06:00:32
    css如何设置背景图片透明度发布时间:2020-11-16 10:34:06来源:亿速云阅读:70作者:小新了解css如何设置背景图片透明度?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面...

    css如何设置背景图片的透明度

    发布时间:2020-11-16 10:34:06

    来源:亿速云

    阅读:70

    作者:小新

    了解css如何设置背景图片的透明度?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!css设置背景图片的透明度的方法:可以利用opacity属性来进行设置,如【opacity: value|inherit;】。value规定不透明度,inherit规定从父元素继承opacity属性的值。

    属性介绍:

    opacity 属性设置元素的不透明级别。

    语法:opacity: value|inherit;

    属性值:

    value    规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。

    inherit    应该从父元素继承 opacity 属性的值。

    示例:

    提示:CSS 中无法直接给背景图片加 opacity 属性,可以使用下面的方法绕过这个限制。div {

    width: 200px;

    height: 200px;

    display: block;

    position: relative;

    }

    div::after {

    content: "";

    background: url(image.jpg);

    opacity: 0.5;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    position: absolute;

    z-index: -1;

    }

    感谢各位的阅读!看完上述内容,你们对css如何设置背景图片的透明度大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。

    展开全文
  • 一款非常漂亮的CSS3鼠标悬停图片透明渐变颜色背景遮罩动画特效,当鼠标滑过图片时,图片上方会覆盖一层渐变颜色的蒙版,移开图片蒙版又会以渐变的方式消失,视觉效果相当好看。
  • 图片作为CSS背景时,如何设置背景图片透明度,让背景图片半透明。纯色背景半透明比较容易,而图片相对属性要稍微复杂些,考虑浏览器兼容和浏览器版本。方法一:直接编辑图片直接将图片在图片编辑软件中(比如PS)编辑...
  • 上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧。效果展示:内容半透明内容不透明最常见的做法事设置元素的opacity,这种设置出来的效果就是...
  • 主要为大家详细介绍了CSS鼠标点击改变图片透明度,为大家提供改变图片css透明度属性的简单方法,感兴趣的小伙伴们可以参考一下
  • 今天要设计一个定位在图片上的标签,标签的背景要有一定的透明度,使用到了opacity的属性,过去没太注意这个属性的兼容性问题,结果采坑了。。。 1.完成后的效果 完成前后的效果应该是这样的: 背景透明前 背景...
  • css透明度的设置在网页的设计中是经常需要用到的...今天这篇文章就来给大家分享css图片透明度的设置方法。css中与设置透明效果相关的属性有两个:opacity和rgba。(推荐视频课程:HTML+CSS+JS+vue前端基础入门~htt...
  • 解决:build->utils.js里,修改:增加 publicPath:'../../', if (options.extract) { ...以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也
  • css设置背景颜色半透明或者设置背景图片透明,但有的时候只需要设置最外层的div为半透明里面的内容不需要设置下面介绍一下这两种情况1.设置html元素你面内颜色和图片都为半透明状态支持IE浏览器.bg1{background:#...
  • css设置图片背景透明

    千次阅读 2021-06-12 02:59:26
    我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto!...
  • .demo{ position: relative; width: 500px; height: 300px; line-height: 50px; text-align: center; color: red; } .demo::before{ content: "";... /*透明度*/ } 图片透明 内容不透明div>
  • css 背景透明

    千次阅读 2020-01-07 18:47:49
    1.背景透明化 opacity:0.5; //导致页面上的内容也被透明化 background:rgba(33,33,33,0.5); //透过rgba提供的透明特性则不存在这个问题
  • CSS实现背景图片透明和文字不透明效果

    万次阅读 多人点赞 2018-11-20 16:34:17
    项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1{  width: 500px;  height: ...
  • 据说iOS6系统(iPhone5)增加了两个CSS3属性,一个是CSS3 filters – CSS3滤镜,在“CSS图片转换成黑白”一文中就介绍过CSS3 grayscale滤镜;另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出。 毕竟有IE滤镜这厮,...
  • 项目中经常会用到背景...CSS实现背景图片透明,文字不透明效果的两种方法:方法一(半透明效果):背景图 + 定位 + background:rgba(255,255,255,0.3)示例:.demo2-bg{background: url(http://csssecrets.io/images/t...
  • css实现背景图片透明,内容不透明

    万次阅读 多人点赞 2018-03-12 15:41:38
    最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧。 效果展示 半透明 不透明 常见的失败做法 最常见的做法事设置元素的opacity,这种设置出来的效果...
  • 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...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,137
精华内容 18,054
关键字:

背景图片透明css