精华内容
下载资源
问答
  • css 背景效果
    千次阅读
    2018-05-18 16:19:21

    在现代网页设计中,大背景图设计非常流行。随着高清(现在是4K)显示器的出现,越来越多的网页设计师使用大背景图来填充屏幕。 为什么?
    因为这样可以造成很大的视觉冲击力,并有助于更好的传递所要表现的内容。

    但是,如果只是吧大背景简单的放在网页上效果有限。 使用 CSS,偶尔结合 JavaScript ,可以创造出一些惊人的特效。

    更多相关内容
  • css 设置好看的背景效果(毛玻璃)

    千次阅读 2022-04-22 11:25:40
    1. 设置一个好看的背景 .card { height: 100vh; background: radial-gradient( circle at 60% 90%, rgba(46, 103, 161, 1), transparent 60% ), radial-gradient( circle at 20px 20px, r

    先设置一个容器DIV

    <div class="card"></div>
    

    1. 设置一个好看的背景在这里插入图片描述

    .card {
      height: 100vh;
      background: radial-gradient(
          circle at 60% 90%,
          rgba(46, 103, 161, 1),
          transparent 60%
        ),
        radial-gradient(
          circle at 20px 20px,
          rgba(46, 103, 161, 0.8),
          transparent 25%
        ),
        #182336;
    }
    

    2. 设置一个盒子样式

    在这里插入图片描述

    .card {
      color: rgba(255, 255, 255, 0.8);
      position: absolute;
      left: 100px;
      top: 200px;
      z-index: 10;
      font-family: sans-serif;
      text-align: center;
      width: 300px;
      height: 500px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      border-left: 1px solid rgba(255, 255, 255, 0.4);
      background: linear-gradient(
        to top right,
        rgba(90, 149, 207, 0.5),
        rgba(58, 76, 99, 0.8)
      );
      box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2),
        -10px 10px 20px rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(6px); /*  元素后面区域添加模糊效果 */
      border-radius: 20px;
      // transform: rotate(-15deg);
    }
    
    展开全文
  • 正如前面所说,仅仅依靠CSS现有的属性,我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果,我们需要借助CSS的其他方法来实现,比如说CSS伪元素,他可以帮助我们模拟出这些CSS无法...
  • CSS 背景

    2020-12-13 19:36:03
    CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position 背景颜色 background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器...
  • CSS模糊背景效果代码

    2021-01-23 05:18:09
    CSS模糊背景效果代码
  • css透明度的设置在网页的设计中是经常需要用到的,有时为了设计出的网页更加的美观,会对图片进行透明化处理,这样网页上面的内容就不会看不见,有的网页因为图片作为背景,也会更加美观,那么,css中的透明度怎么...

    css透明度的设置在网页的设计中是经常需要用到的,有时为了设计出的网页更加的美观,会对图片进行透明化处理,这样网页上面的内容就不会看不见,有的网页因为图片作为背景,也会更加美观,那么,css中的透明度怎么设置呢?今天这篇文章就来给大家分享css中图片透明度的设置方法

    css中与设置透明效果相关的属性有两个:opacity和rgba。(推荐视频课程:HTML+CSS+JS+vue前端基础入门~https://www.bilibili.com/video/av82371580)

    下面我们就用这两个属性来分别设置图片透明度的效果。

    首先我们来看css中opacity属性设置图片透明度的例子

    css:

    .opacity1, .opacity2, .opacity_img { display: inline-block; }
    
    .opacity1 { filter: Alpha(opacity=0); }
    
    .opacity2 { filter: Alpha(opacity=50); }
    
    .opacity_img { filter: Alpha(opacity=100); }
    
    :root .opacity1 { opacity: 0; filter: none; }
    
    :root .opacity2 { opacity: .5; filter: none; }
    
    :root .opacity_img { opacity: 1; filter: none; }

    html:

    <p>
    
        <a href="#" class="opacity2">
    
            <img class="opacity_img" src="
    
            " />
    
        </a>
    
    </p>
    
    <p>
    
        <a href="#" class="opacity2">
    
            <img class="opacity2" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    
        </a>
    
    </p>

    效果如下:

    0854b36a89923fdc6d2f1de7aea5c7e0.png

    注意:目前主流的浏览器都支持opacity:value写法,value取值为0-1,0为完全透明,1为完全不透明。但是在IE8及之前的版本中是不支持这种写法,那么我们可以通过滤镜来解决 filter:alpha(opacity=value),value取值为0-100,0为完全透明,100为完全不透明。就像上面例子那样。

    我们再来看看css中rgba设置图片透明的例子:

    html:

    <div class="demo2-bg">
    
        <div class="demo2">背景图半透明,文字不透明<br />方法:定位+ background:rgba(255,255,255,0.3)</div>
    
    </div>

    css:

    .demo2-bg{
    
        background: url(//image.zhangxinxu.com/image/study/s/s256/mm1.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);

    效果如下:

    fc24420a4e7348d96ae3021aa5614736.png

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

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

    最后,我们再来看一个图片毛玻璃效果的设置方法:

    <div class="demo1">背景图半透明,文字不透明<br />方法:背景图+ filter:blur</div>
    
    .demo1{
    
        width: 500px;
    
        height: 300px;
    
        line-height: 50px;
    
        text-align: center;
    
    }
    
    .demo1:before{
    
        background: url(//image.zhangxinxu.com/image/study/s/s256/mm1.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);
    
    }

    效果如下:

    c2b146155e1531360be27f5759bb8a6f.png

    以上就是css透明度怎么设置?三种css图片透明度的设置方法的详细内容

    更多学习内容:我的学习交流群web前端学习交流群

    展开全文
  • 主要为大家详细介绍了CSS3如何打造磨砂玻璃背景效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • //这个div就是背景图 <div class=beijing></div> //这个div就是显示的内容块,也就是我的logo和登录框 <div class=content></div> CSS代码: .login-container{ position: relative; width: 100%; h
  • 这是一款纯CSS3实现的全屏背景图片缩小渐变切换效果源码,页面的背景图可呈现定时渐变与切换效果。渐变大小缩放效果流畅自然,采用纯css3技术控制切换效果。建议使用支持css3效果较好的火狐或谷歌等浏览器预览本源码...
  • CSS3制作3D星空背景动画特效是一款逼真的星空动画特效下载。
  • 如何用CSS实现大背景的网页效果呢,下面来看一些实例: 例1:图片+背景颜色将图片边沿的颜色设置成和网页背景色相同的颜色。看下面的图片,留意图片的边沿是纯色的。 这部分很简单,为body元素设置背景图像(定位于...
  • background-image 不支持CSS3 transition ,而CSS3 gradient渐变作为背景图片存在的时候,下面的CSS设置是不会有过渡效果的。 .gradient { background-image: linear-gradient(to right, olive, green); ...
  • 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧。 效果展示 半透明 不透明 常见的失败做法 最常见的做法事设置元素的opacity,这种设置出来的效果就是内容...
  • CSS3斜线条动态背景动画特效是一款css3基于keyframes属性绘制红色和黑色间隔的斜线条移动背景特效。
  • css3背景虚化效果是一款css3+js实现的背景虚化效果,支持添加气泡、隐藏标题等功能。 css3背景虚化效果演示图: 点击查看演示
  • 这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。
  • css3实现一款简单的网页动态渐变背景动画特效,渐变一般是两种颜色,这个可以设置多种渐变颜色。
  • 后来突然想起以前在网上看到有人用CSS3的多背景来模拟边框,就试了一下。 css3 背景 CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。 1...
  • css3背景虚化效果.zip

    2019-07-03 21:48:07
    css3背景虚化效果是一款css3 js实现的背景虚化效果,支持添加气泡、隐藏标题等功能。 css3背景虚化效果演示图: 点击查看演示
  • CSS3背景模糊霓虹灯特效是一款纯CSS3打造粒子模糊随机显示动画特效。
  • html css 标题背景 折边凸显效果,有点意思,记录下,方便留用
  • CSS3发光粒子背景动画特效是一款基于css3 animation属性绘制的透明悬浮发光粒子酷炫动画特效。
  • CSS3绘制蓝色科技背景特效是一款大气创意的文字条纹背景样式特效
  • css实现背景模糊效果

    千次阅读 2022-04-06 21:59:51
    css背景模糊效果 方法:background-color +backdrop-filter 来配合实现

    最近在工作中写样式的时候碰到如图这样的背景模糊效果,思来想去没有合适的方法。后查询相关资料后得出解决方案

    方法:background-color + backdrop-filter 来配合实现

    backdrop-filter css属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

    例:

    <div class="container">
      <div class="box">
        <p>backdrop-filter: blur(10px)</p>
      </div>
    </div>
    
    html,
            body {
                height: 100%;
                width: 100%;
            }
    
            body {
                background-image: url(https://picsum.photos/id/1080/6858/4574), linear- 
                                  gradient(rgb(219, 166, 166), rgb(0, 0, 172));
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
    
            .box {
                /* 重点设置下面两个属性 */
                background-color: rgba(255, 255, 255, 0.3);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(5px);
                border-radius: 5px;
                font-family: sans-serif;
                text-align: center;
                line-height: 1;
                max-width: 50%;
                max-height: 50%;
                padding: 20px 40px;
                color: #fff;
            }
    
            .container {
                align-items: center;
                display: flex;
                justify-content: center;
                height: 100%;
                width: 100%;
            }

    效果图:

     可自行设置想要的背景色和blue数值来达到想要的模糊效果~

    参考:backdrop-filter 属性介绍

    展开全文
  • 网页背景色与大海融为一体,这个是非常唯美的艺术效果,设置了background-position:top;背景图片在水平居中,垂直靠上的位置开始水平平辅,这两条线痕,则成了内容的左右边框
  • 创意背景悬停效果 CSS创意背景悬停效果 Olá,hoje estarei umcódigopulicado no Canal在线教程。 Segue o link做导师: https://www.youtube.com/watch?v=StjmEh211Oc
  • CSS背景图片高斯模糊效果

    千次阅读 2022-03-19 14:14:35
    CSS实现背景图片模糊效果
  • CSS背景动画很长时间以来都是一个热门话题,很多时候都是因为效果特别绚丽,而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画,答案是yes….虽然有些限制因素。让我们来看看如何...
  • 使用css3 属性:background-size background-size:cover 即可实现像桌面壁纸一样拉伸 以下是w3c上面的解释: 语法 复制代码代码如下: background-size: length|percentage|cover|contain;
  • CSS实现背景模糊/毛玻璃效果

    千次阅读 2021-12-19 11:45:52
    如果只单纯的想实现背景模糊效果,而背景之上没有其他内容,那么就使用filter(滤镜)就足以,其中包括模糊,亮度,灰度,阴影等等:参考 MDN filter 相关内容。如果在其中上面还有文字,也同样会出现模糊。用下面的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 169,293
精华内容 67,717
关键字:

css 背景效果

友情链接: 112-x.rar