CSS-backgroound和radial-giadient的常见用法

前言

这里主要介绍下css中background和radial-giadient径向渐变的使用，工作中用到的地方可能也不太多，但是每次用到了都需要查阅官网，查资料就比较麻烦，这里记录一下我自己整理的常见用法，方便日后使用吧！这里省去了一些特别特别基础的使用语法。

自己根据两个属性实现的一些简单的效果
background的语法使用
radial-giadient的语法使用

正文

根据background和radial-gradient实现的一些简单效果

　　2.background的语法使用

　　　　background属性

- - background-color : 定义元素的背景颜色
    - - background-color 设置的只是背景颜色， background 设置的是整个背景
      - 当元素本身设置了background-img 属性时，如果设置了background-color,图片不会被覆盖，background-color会在image底层，而过设置的是background，那么图片会被覆盖掉
  - background-image：定义图片为背景，多张图片时需要写多个url
    - - 当设置了visibility:hidden与display:none对background-image的影响
        
        background-image对应的是一张静态资源图片，当页面渲染前会请求这张图片的资源来进行加载渲染
        
        visibility:hidden 元素仍然再dom树中，只是不显示而已，display:none,元素不存在与dom树中
        
        当元素visibility：hidden时，这张图片资源仍然会请求，但是显示不出来，当设置了display:none这张图片不会请求，也不会显示
        
        一种特殊场景如果也i按出现了滚动条，那么滚动条下面（即视图之外）的background-image静态资源回不回请求呢，答案是会的，只要元素存在与dom树上，不论显示还是隐藏，其一栏的background-image资源都将会请求回来
  - background-position：设置图片的起始位置，定义的background-image在容器中的位置，对background-color无效
  - background-repeat：设置背景图片是否以及如何平铺，值针对background-image的平铺，对background-color无效
  - background-size：设置背景图片的尺寸，有四种植，如果要设置size的值，需要紧跟在position后面并且用"/"隔开
    - - 　length：设置【怕【图像的高宽，图片会根据高宽发生扭曲，通常使用的时候只需要设置一个值，以免图片发生扭曲
      - percentage：以父元素的百分比设置高宽，同上
      - cover 把背景图片扩展到足够大，以使背景图片覆盖整个背景区域，图像不会发生扭曲，内容区域全部有背景图片，但是可能背景图片不全，只是其中的一部分
      - contain ：设置背景图片扩展到最大尺寸，使得其高宽全适应内容区域，图片不会发生扭曲，但是肯能一部分区域没有背景图
  - background-origin：设置背景图片的背景区域
    - - border-box：默认值，背景绘制在边框的方框内
      - padding-box：背景绘制在衬距方框内
      - content-box：背景绘制在内容方框内
  - background-clip：规定背景的绘制区域
  - background-attachment：设置背景图像是否固定或者随着页面的滚动而滚动，定义background-image是否跟随容器的滚动而滚动，对background-color无效
    - - scroll:默认值，背景图像会随着页面其余部分的滚动而滚动
      - fixed:当页面的其余部分滚动时，背景图像不会移动
      - inherit:规定应该从父元素继承background-attachment属性的设置

实现上面第一个效果的写法：　　　　　

           

.mydiv{

            width: 500px;

            height: 500px;

            margin: 500px auto;

            border: 10px solid pink;

            background-color: salmon;

            background-image: url(../img/myflaw.png), url(../img/paper.png);

            background-position:center center,right bottom;

            background-repeat:no-repeat,repeat;

            background-attachment: inherit;

        }

补充一个transparent常见用法

　　　　background :transparent代表背景透明

　使用场景：如果一个元素在另一个元素之上，而你想显示下面的元素，这时你就需要把上面的元素的bangckground设置为transparent，这就像常见的你点击保存二维码一样，有时候其实是两张图片，你看到的是下面的一张图片，点击保存的是上面的二维码的图片。

　　3.radial-giadient的语法使用

　　 radial-gradient函数用于径向渐变创建图像

语法：background: radial-gradient(shape size at position, start-color, …, last-color);

　　径向渐变由中心点定义

为了创建径向渐变你必须设置两个终止色

三个参数

　　shape:确定圆的类型：elipse：默认值，指定椭圆形的径向渐变 circle：指定圆形的径向渐变

　　size:定义渐变的大小，可能值：

farthest-corner:(默认),指定径向半径长度从圆心到离圆心最远的角

closest-side:指定径向渐变的半径长度从圆心到离圆心最近的边

closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边

　　position d定义渐变的位置，可能值：

center:（默认）设置中间为径向渐变圆心的坐标值

top：设置顶部为径向渐变的纵坐标值

bottom:设置底部为径向渐变的原型的纵坐标值

　　start-color,....,last-color 用于径向渐变的起止颜色

常见的用法一：效果图上图2

 <div class="mydiv">

        <div class="innerdiv">

            <div>123456789</div>

            <div>123456789</div>

        </div>

    </div>

 .mydiv{

            height: 220px;

            width: 220px;

            border: 1px solid pink;

            padding: 10px;

            margin: 0 auto;

            background: radial-gradient(transparent  10px, powderblue  10px);

            background-size: 22px 22px;

            background-position: 10px 10px;

            box-shadow: 0 4px 16px #333333;

        }

        .innerdiv{

            height: 220px;

            background-color: powderblue;

        }

常见的用法二：效果图上图3

<div class="wrap">

        500元

 </div>

.wrap{

            position: relative;

            margin: 100px auto;

            height: 160px;

            width: 400px;

            background-image: radial-gradient( circle at 0.5px 8px ,transparent 6px,#ff9e6d 6px,#ff9e6d),radial-gradient( circle at 199.5px 8px ,transparent 6px,#ff9e6d 6px);

            background-size: 200px 18px;

            background-position: 0 0 , 200px 0;

            background-repeat: repeat-y;

            font-size: 60px;

            color: #fff;

            font-weight: bold;

            line-height: 160px;

            padding-left: 40px;

            box-sizing: border-box;

            cursor: pointer;

        }

        .wrap::before {

            position: absolute;

            content: "";

            left: 240px;

            top: 0;

            bottom: 0;

            width: 0;

            border-left: 1px dashed #fff;

        }

        .wrap::after {

            position: absolute;

            content: "立即领取";

            font-size: 26px;

            width: 70px;

            top: 50%;

            right: 2%;

            transform: translate(-50%, -50%);

            line-height: 40px;

            letter-spacing: 5px;

        }

常见的用法三：效果图上图4

<div class="color-text">

        hello world!

</div>

.color-text{

            width: 700px;

            font-size:100px;

            font-weight: 600;

            background:-webkit-linear-gradient(left, #FB1616, #F3167C 10%,

            #5A28F3 20%,#2099EF 30%, #096B7B 40%,#5EE626 50%, #B7D416 60%,

            #E0AC1A 70%, #EF6F14 80%,#B90F4E 90% );

            color:transparent;

            /* 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。 */

            -webkit-background-clip: text;

            margin: 100px auto;

        }

还有很多炫酷的用法，比如电子回单里面边框条纹，信封的手撕特效都是由css完成的，欢迎各位大佬提出宝贵的意见。

巴特西

CSS-backgroound和radial-giadient的常见用法

最新文章

热门文章