精华内容
下载资源
问答
  • css 背景图片平铺技巧

    2020-12-09 20:12:05
    使用css来设置背景图片同传统的做法一样简单,但相对于传统控制方式,css提供了更多的可控选项,我们先来看看最基本的设置图片的方法。xhtml代码: 复制代码代码如下:”content”> </div> css代码: 复制代码代码...
  • 前端开发中两个很不错的小技巧, CSS三角形与圆角背景.
  • CSS技巧之圆角背景与三角形 前端开发中两个很不错的小技巧, CSS三角形与圆角背景. 的确, 它们都可以通过图片来实现, 但, 抛开用代码实现可以减小图片加载量不说, 当你遇到三角形或圆角背景下还有一层非纯色背景...

    CSS技巧之圆角背景与三角形

    前端开发中两个很不错的小技巧, CSS三角形与圆角背景. 的确, 它们都可以通过图片来实现, 但, 抛开用代码实现可以减小图片加载量不说, 当你遇到三角形或圆角背景下还有一层非纯色背景时, 你又不得不考虑IE6 png兼容问题, 嗯, IE6,万恶之源. 此时, CSS三角形及圆角背景将是上佳选择.

    查看演示: 点此查看DEMO


    CSS圆角背景
    通过改变层叠元素的margin值实现圆角效果.当然,有人会说不用这么麻烦,CSS3几句代码就可以搞定,但目前来说不实用,支持的浏览器没几个.
    css部分

    .r_top, .r_bottom {display:block; background:transparent; font-size:1px}/*左上右上角和左下右下角的容器*/
    .r_a, .r_b, .r_c, .r_d {display:block; overflow:hidden}/*四个圆角*/
    .r_a, .r_b, .r_c{height:1px}
    .r_b, .r_c, .r_d{background:#cf6}
    .r_a {margin:0 5px}
    .r_b {margin:0 3px; border-width:0 2px}
    .r_c {margin:0 2px}
    .r_d {height:2px; margin:0 1px}

     

    html部分

    <!--左上角/右上角-->
    <div class="r_top"><em class="r_a"></em><em class="r_b"></em><em class="r_c"></em><em class="r_d"></em></div>
    <div class="box">
    .....内容容器.....
    </div>
    <!--左下角/右下角-->
    <div class="r_bottom"><em class="r_d"></em><em class="r_c"></em><em class="r_b"></em><em class="r_a"></em></div>

     

    CSS三角形
    这个就比较简单了, 把元素定义成块级0大小(0宽0高0字号0行高)后, 通过改变元素的border-color值实现. 本文用的是em元素, 当然, 如果你项目中用em比较频繁, 为避免冲突也可以用samp,strong等元素.
    当然, 即便用CSS实现的三角形, 万恶的IE6还是会给你添点麻烦: IE6不支持border-color的transparent值, 怎么办? 为ie6单独写一个border-color值, 然后用chroma滤镜实现透明, 详见代码
    css部分

    em{display:block;width:0;height:0;font-size:0;line-height:0;border-width:40px;border-style:solid;border-color:#cf6 #fff #39c #ffc;_filter:chroma(color=#000000)/*色度滤镜,让IE6实现透明borderColor.滤镜的颜色值不可简写*/}
    em.a{border-color:transparent transparent #fff transparent;_border-color:#000 #000 #fff #000}
    em.b{border-color:transparent transparent transparent #fff;_border-color:#000 #000 #000 #fff}
    em.c{border-color:#fff transparent transparent transparent;_border-color:#fff #000 #000 #000}
    em.d{border-color:transparent #fff transparent transparent;_border-color:#000 #fff #000 #000}

     

    html调用

    <em><em><!--它就是三角形了,哈-->

     

    展开全文
  • 接下来可以通过设置背景的大小,让背景高度变小并且背景默认为repeat,从而出现条纹状 background: linear-gradient(#fb3 50%, #58a 50%); background-size: 100% 30px; 我们可以不设定第二个颜色的起始...

    一、横向条纹

    如下代码:

    background: linear-gradient(#fb3 20%, #58a 80%)

    上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色。如果让中间的部分逐渐缩小,当中间部分变为0即上下两种颜色的七点和终点相同是,就没有了渐变而变成了两种颜色的色条:

    background: linear-gradient(#fb3 50%, #58a 50%);

    接下来可以通过设置背景的大小,让背景高度变小并且背景默认为repeat,从而出现条纹状

    background: linear-gradient(#fb3 50%, #58a 50%);

    background-size: 100% 30px;

    我们可以不设定第二个颜色的起始位置,设置为0,则浏览器默认为接着上一个颜色开始:

    background: linear-gradient(#fb3 30%, #58a 0);

    background-size:100% 30px;

    这样就形成了一个黄色占30%蓝色占70%的条纹状背景

    也可以设置多种颜色,下面设置了三种颜色的条纹:

    background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);

    background-size: 100% 45px;

     

    二、竖向条纹

    只需要在linear-gradient方法中加一个前缀即可。注意还需颠倒background-size长宽的设定

    background: linear-gradient(to right, #fb3 50%, #58a 0);
    background-size:30px 100%;

     

    三、斜向条纹

    可以通过修改background-size的值以及为linear-gradient添加角度来实现斜向的条纹:

    background: linear-gradient(45deg, #fb3 50%, #58a 0);    //让背景的渐变带有倾斜

    background-size:30px 30px;   //每一块小组成部分固定宽度和高度

    但这样做的结果是只会形成一小块一小块的斜线,而不是整体div的斜线,我们需要以四个小div为一组绘制斜线,添加linear-gradient中的颜色分解:

    background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);
    background-size:30px 30px;

    四、使用repeat-linear-gradient

    对于斜线的背景绘制,使用repeat-linear-gradient方法更有效。使用该方法的时候,设置的颜色变化会自动进行重复直到铺满整个div。实例代码如下:

    background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

    通过这种方式可以任意更改角度,而不会出现上中方法中的调节困难

    background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a 0, #58a 30px);

    (这种方法其实相当于将size的控制和gradient的控制合到了一起)

     

    五、关于颜色的设定

    有时我们希望条纹背景的颜色之间是相近的颜色,但是如果手动设定这个颜色的#很不方便,也很难发现要选择什么样的颜色。可以使用如下方法:

    background: #58a;
    background-image: repeating-linear-gradient(30deg,
    hsla(0,0%,100%,.1),
    hsla(0,0%,100%,.1)15px,
    transparent 0,transparent 30px);

    这种方法的原理是:指定背景中最深的颜色,条文中其他相近色用透明度进行调整

    展开全文
  • CSS技巧(一):背景与边框

    千次阅读 2017-03-30 18:49:28
    CSS技巧(一):背景与边框

    背景与边框

    1.半透明边框

    背景知识:rgba/hsla,在rgb/hsl的基础上增加了Alpha通道,用于设置颜色的不透明度(就是能透过多少背景)

    • rgba接受四个数值,即rgba(red, green, blue,a),rgb可以为数值(0 ~ 255),也可以为百分比(0 ~ 100%),a表示不透明度(0~1),1为完全不透明,0表示完全透明。
      rgba(0,255,0,1) 表示纯绿色,完全不透明

      rgba(100%,0,0,0.5)表示纯红色,半透明

    • hsla(色相, 饱和度%, 亮度%,透明度),格式为hsla(0, 0%,0%,0)
      hsla的第一个值表示色相,也就是一个实际的颜色,比如红色或者绿色。所有的颜色绕色相环(色轮)一周,色相值以圆周上的度数表示。

      色轮

      色轮

      红色是0或360,青色是180.以下是彩虹七色在色轮中的大致色相值。
      红:0;橙:35;黄:60;绿:125;蓝:230;靛:280;紫:305;

    • 饱和度设定有多少颜色,灰色的饱和度低,而强烈的色彩饱和度高

    • 亮度设定颜色的明暗,0%就是黑色,100%就是白色

    难题

    设计一个带有半透明边框的容器,可能很多人会这样写

    border: 10px solid hsla(0, 0%, 100%, 0.5);
    background: white;
    

    但是实际情况,半透明的边框并不会显现出来。在边框中使用半透明并没有想象中的那么容易

    1.png

    解决方案

    出现这种情况是,背景会默认延伸到边框所在的区域下面。可以使用background-clip属性来处理。

    background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框下面,有三个可选值,默认为border-box

    • border-box
      背景延伸到边框外沿(但是在边框之下)。

    • padding-box
      边框下面没有背景,即背景延伸到内边距外沿。

    • content-box
      背景裁剪到内容区 (content-box) 外沿。

    有了这个属性可以很快解决这个问题了

    border: 10px solid hsla(0, 0%, 100%, 0.5);
    background: white;
    background-clip: padding-box;
    
    2.png

    2. 多重边框

    背景知识:box-shadow 描述阴影效果

    2.1 使用box-shadow来制作多重边框

    background: yellowgreen;
    box-shadow: 0 0 0 10px #655,
               0 0 0 15px deeppink,
               0 2px 5px 15px rgba(0, 0, 0, .6)
    
    • 第一个length参数设置水平偏移量,如果是负值则阴影位于元素左边;
    • 第二个设置垂直偏移量,如果是负值则阴影位于元素上面。
    • 第三个值越大,模糊面积越大,阴影就越大越淡。 不能为负值。
    • 第四个取正值时,阴影扩大;取负值时,阴影.收缩
    • 第五个参数为颜色
    • 还有一个参数用来设置阴影位置,默认在边框外,在最前面设置inset让阴影在边框内
    02-1.png

    用border同样可以达到此效果,只不过更麻烦。用box-shadow通过逗号分隔可以创建任意数量的投影。

    2.2 通过outline制作

    使用下面代码同样可以实现

    background: yellowgreen;
    border: 10px solid #655;
    outline: 5px solid deeppink;
    

    outline还可以有一个好处就是可以制作虚线边框,还可以通过outline-offset属性来控制它跟元素边缘之间的距离,接受负值。

    background: black;
    outline: 1px dashed white;
    outline-offset: -10px;
    
    02-2.png

    3. 灵活的背景定位

    以往针对容器某个角对背景图片做偏移定位的时候,一般是这样写

         
    1
         
    background-position :bottom right

    或者使用百分比数值代替bottom和right,但是还有更好的方案

    3.1 background-position的扩展语法方案

    允许我们指定背景图片距离任意角的偏移量,只要在偏移量前面指定关键字

         
    1
    2
    3
         
    background: url(http://csssecrets.io/images/code-pirate.svg)
    no-repeat bottom right #58a;
    background-position: right 20px bottom 10px;

    上面的代码表示背景图片跟右边缘保持20px,同时跟底部保持10px;background属性里面的设置用于回退。

    03-1.png

    3.2 background-origin方案

    此方案用于更好的解决背景图片偏移量和容器的内边距一样时的问题。

    • border-box
      背景将会延伸到延伸到外边界的边框

    • padding-box
      背景描绘在padding盒子,边框里不会有背景出现。同样,背景将会延伸到最外边界的padding.

    • content-box
      背景描绘在内容区范围.

    background-origin设置成content-box即可

         
    1
    2
    3
    4
         
    padding: 10px;
    background: url(http://csssecrets.io/images/code-pirate.svg)
    no-repeat bottom right #58a;
    background-origin: content-box;

    3.3 calc()方案

         
    1
         
    background-position: calc( 100% - 20px) calc( 100% - 10px)

    4.边框内圆角

    这个效果按自己的思路都可以实现。我的第一反应也是使用两个元素实现。

         
    1
    2
    3
         
    <div class="something-meaningful">
    <div>I have a nice subtle inner rounding, don’t I look pretty? </div>
    </div>
         
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
         
    .something-meaningful {
    background: #655;
    padding: . 8em;
    }
    .something-meaningful > div {
    background: tan;
    border-radius: . 8em;
    padding: 1em;
    }
    04-1.png

    当然这本书上肯定要讲述比较独特的方法实现。利用outline和box-shadow属性,只需写一个html属性即可

         
    1
    2
    3
    4
    5
         
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655;
    border-radius: .8em;
    padding: 1 em;
    background: tan;
    04-2.png

    分析其原理:

    • outline描边并不会跟着圆角走,当只是用outline的时候,圆角跟直角处有空隙
    04-3.png
    • box-shadow会跟着圆角走,当只是用box-shadow的时候没有直角
    04-4.png

    于是正好可以使用box-shadow来填充那部分空隙

    5. 条纹图案

    背景知识: 线性渐变linear-gradientbackground-size

    • background-size 设置背景图片大小,有多种写法
      • 使用关键字:background-size: cover,表示缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。还有background-size: contain,缩放背景图片以完全装入背景区,可能背景区部分空白。
      • 使用一个值:background-size: 3em;这个值指定图片的宽度,图片的高度隐式的为auto,还可以使用百分比。
      • 两个值:background-size: 3em 25%,第一个值指定图片的宽度,第二个值指定图片的高度。可为数值,可为百分比。
      • 逗号分隔的多个值:设置多重背景

    5.1垂直条纹

    尝试一个基本线性渐变

         
    1
         
    background: linear-gradient( #fb3, #58a);

    最终效果是从上到下,第一个颜色渐变到第二个颜色

    05-1.png

    添加数值,指定被填充的区域

         
    1
         
    background: linear-gradient( #fb3 20%, #58a 80%);
    05-2.png

    可以看到渐变的区域变小了

    把区域设为50%

         
    1
         
    background: linear-gradient( #fb3 50%, #58a 50%)
    05-3.png

    发现已经看不到渐变区域了,如果多个色标具有相同的位置,它们会产生一个无限小的过渡区域,过度的起止变化分别是第一个和最后一个指定值,从效果上看,颜色会在那突然变化,而不是一个平滑的过度。

    那么知道这个就可以配合background-size

         
    1
    2
         
    background: linear-gradient( #fb3 50%, #58a 50%);
    background-size: 100% 30 px;
    05-4.png

    我们把两条条纹的高度设置成15px,由于背景默认是平铺的,整个容器也被填满了。

    还可以创建不等宽的条纹

         
    1
    2
         
    background: linear-gradient( #fb3 30%, #58a 30%);
    background-size: 100% 30 px;
    05-5.png

    如果某个色标的位置值比整个列表中在它之前的色标的位置的值都要小,则该色标的位置值会被设置为它前面所有色标位置的最大值。所以利用这个特性,可以不用每次都修改两个数

         
    1
    2
         
    background: linear-gradient( #fb3 30%, #58a 0);
    background-size: 100% 30 px;

    创建超过两种颜色的条纹

    05-6.png
         
    1
    2
         
    background: linear-gradient( #fb3 33 .3%, #58a 0, #58a 66 .6%, yellowgreen 0);
    background-size: 45 px;

    5.2垂直条纹

    原理一样,稍微调整即可

         
    1
    2
         
    background: linear-gradient( to right, #fb3 50%, #58a 0);
    background-size: 30 px 100%;
    05-7.png

    通过 to right 改变渐变的起始位置,也可以写成角度,这里可以写90deg
    另外background-size的数值也要调换

    5.3 斜向条纹

    使用repeating-linear-gradient快速构建

         
    1
         
    background: repeating-linear-gradient(45 deg, #fb3, #58a 30 px);
    05-8.png

    可以很方便的变换想要的图形

         
    1
         
    background: repeating-linear-gradient(60 deg, #fb3, #fb3 15 px, #58a 0, #58a 30 px);
    05-9.png

    5.4 灵活的同色系条纹

    很多情况下,我们想要的条纹图案是由同一系色组成,只是在明暗方面有些差异。

         
    1
         
    background: repeating-linear-gradient(30 deg, #79b, #79b 15 px, #58a 0, #58a 30 px);
    05-10.png

    但是上面写法想要修改的时候需要修改四处颜色,改进的办法

         
    1
    2
    3
    4
    5
         
    background: #58a;
    background-image: repeating-linear-gradient(30 deg,
    hsla(0,0%,100%, .1),
    hsla(0,0%,100%, .1),15 px,
    transparent 0, transparent 30 px);

    这里把最深的颜色作为背景色,同时把半透明白色的条纹叠加在背景之上来得到浅色条纹。这样每次只要修改背景色就可以了。

    6.复杂的背景图案

    背景知识:css渐变, “条纹背景”

    6.1 网格

    把多个渐变图案组合起来,让它们透过彼此的透明区域显现时,就会得到意想不到的图案。

         
    1
    2
    3
    4
         
    background: white;
    background-image: linear-gradient(90 deg, rgba(200,0,0, .5), 50%, transparent 0),
    linear-gradient( rgba(200,0,0, .5) 50%, transparent 0);
    background-size: 30 px 30 px;
    06-1.png

    有些时候我们希望网格中每个格子的大小可以调整,而网格线条的粗细同时保持固定。下面展示了使用长度而不是百分比作为色标的场景

         
    1
    2
    3
    4
         
    background: #58a;
    background-image: linear-gradient( white 1 px, transparent 0),
    linear-gradient(90 deg, white 1 px, transparent 0);
    background-size: 30 px 30 px;
    06-2.png

    还可以把两幅不同线宽、不同颜色的网格图案叠加起来

         
    1
    2
    3
    4
    5
    6
         
    background: #58a;
    background-image: linear-gradient( white 2 px, transparent 0),
    linear-gradient(90 deg, white 2 px, transparent 0),
    linear-gradient( hsla(0,0%,100%, .3) 1 px, transparent 0),
    linear-gradient(90 deg, hsla(0,0%,100%, .3) 1 px, transparent 0);
    background-size: 75 px 75 px, 75 px 75 px,15 px 15 px, 15 px 15 px;
    06-3.png

    6.2 波点

    波点是利用径向渐变知识。下面是一个简单的径向渐变

         
    1
    2
    3
         
    background: #655;
    background-image: radial-gradient( tan 30%, transparent 0);
    background-size: 30 px 30 px;
    06-4.png

    这里的径向渐变由每个小方块的中心向四周渐变,也就是background-size指定的大小。

    下面是一种更加使用的图案:

         
    1
    2
    3
    4
    5
         
    background: #655;
    background-image: radial-gradient( tan 30%, transparent 0),
    radial-gradient( tan 30%, transparent 0);
    background-size: 30 px 30 px;
    background-position: 0 0, 15 px 15 px;

    使用background-position属性将两个背景位置错开,第一个值表示水平位置,第二个表示垂直位置,用逗号分隔设置多重。

    06-5.png

    因为为了达到效果,第二层背景的偏移定位值必须是平铺图案中的每个基本单元宽高的一半,每次修改要修改多处尺寸,可以使用scss

         
    1
    2
    3
    4
    5
    6
    7
         
    @ mixin polka( $size, $dot, $base, $accent) {
    background: $base;
    background-image: radial-gradient( $accent $dot, transparent 0),
    radial-gradient( $accent $dot, transparent 0);
    background-size: $size $size;
    background-position: 0 0, $size/ 2 $size/ 2;
    }
         
    1
         
    @ include polka( 30px, 30%, #655, tan)

    6.3 棋盘

    一步一步制作棋盘,首先回想一下制作三角形图案。要制作类似下面这张图案

    06-11.png
         
    1
    2
    3
         
    background: #eee;
    background-image: linear-gradient(45 deg, #bbb 50%, transparent 0);
    background-size: 30 px 30 px;

    每个三角形占据每个单元的一般,修改色标位置为25%。

    06-7.png

    我们把色标的顺序反转,便可以创建相反方向的三角形了

         
    1
    2
    3
         
    background: #eee;
    background-image: linear-gradient(45 deg, transparent 75%, #bbb 0);
    background-size: 30 px 30 px;
    06-8.png

    组合起来的图形

         
    1
    2
    3
    4
         
    background: #eee;
    background-image: linear-gradient(45 deg, transparent 75%, #bbb 0),
    linear-gradient(45 deg, #bbb 25%, transparent 0);
    background-size: 30 px 30 px;
    06-9.png

    现在只需要把第二层渐变在水平和垂直方向均移动每个单元的一半,就可以拼接起来。

         
    1
    2
    3
    4
    5
         
    background: #eee;
    background-image: linear-gradient(45 deg, #bbb 25%, transparent 0),
    linear-gradient(45 deg, transparent 75%, #bbb 0);
    background-size: 30 px 30 px;
    background-position: 0 0, 15 px 15 px;
    06-10.png

    产生出了一个正方形,本质上是棋盘的一半,复制一份再创建出另一组正方形。

         
    1
    2
    3
    4
    5
    6
    7
         
    background: #eee;
    background-image: linear-gradient(45 deg, #bbb 25%, transparent 0),
    linear-gradient(45 deg, transparent 75%, #bbb 0),
    linear-gradient(45 deg, #bbb 25%, transparent 0),
    linear-gradient(45 deg, transparent 75%, #bbb 0);
    background-size: 30 px 30 px;
    background-position: 0 0, 15 px 15 px,15 px 15 px, 30 px 30 px;
    06-11.png

    代码进行优化,可以把这些处在单元顶角的三角形两两组合起来(即把第一组和第二组并为一层渐变,第三组和第四组为一层渐变)

         
    1
    2
    3
    4
    5
    6
    7
         
    background: #eee;
    background-image: linear-gradient(45 deg, rgba(0,0,0, .25) 25%, transparent 0,
    transparent 75%, rgba(0,0,0, .25) 0),
    linear-gradient(45 deg, rgba(0,0,0, .25) 25%, transparent 0,
    transparent 75%, rgba(0,0,0, .25) 0);
    background-position: 0 0, 15 px 15 px;
    background-size: 30 px 30 px;

    使用scss

         
    1
    2
    3
    4
    5
    6
    7
    8
    9
         
    @ mixin checkerboard( $size, $base, $accent: rgba( 0, 0, 0,. 25)) {
    background: $base;
    background-image: linear-gradient( 45deg, $accent 25%, transparent 0,
    transparent 75%, $accent 0),
    linear-gradient( 45deg, $accent 25%, transparent 0,
    transparent 75%, $accent 0);
    background-position: 0 0, $size $size;
    background-size: $size* 2 $size* 2;
    }
         
    1
         
    @ include checkerboard( 15px, #58a, tan);

    7. 伪随机背景

    重复平铺的几何图案很美观,但是看起来和你呆板。用css实现图案的随机平铺。

         
    1
    2
    3
         
    background: linear-gradient(90 deg, #fb3 15%, #655 0, #655 40%,
    #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
    background-size: 80 px 100%;
    07-1.png

    上面通过background-size来控制图案每隔80px重复一次。规律比较明显,并不是真实的随机平铺。

    接下来,把这组条纹从一个平面拆散为多个层面:一种颜色作为底色,另外三种颜色作为条纹,然后再让条纹以不同的间隔进行重复平铺。在色标中定好边框的宽度,用background-size来控制条纹的间距

         
    1
    2
    3
    4
    5
    6
         
    background: hsl(20, 40%, 90%);
    background-image:
    linear-gradient(90 deg, #fb3 10 px, transparent 0),
    linear-gradient(90 deg, #ab4 20 px, transparent 0),
    linear-gradient(90 deg, #655 20 px, transparent 0);
    background-size: 80 px 100%, 60 px 100%, 40 px 100%;
    07-2.png

    但是这里还有一个问题,每隔240px还是会重复一次,红色箭头处。这里每次重复单元正好是background-size的最小公倍数,而40、60、80的最小公倍数就是240。

    根据这个逻辑,可以把每个重复单元的尺寸最大化,也就是最小公倍数最大化。为了让最小公倍数最大化,这些数字最好是相对质数(比如,10和27不是质数,但他们是相对质数,最小公倍数为10乘以27)。要达成相对质数,尽量选择质数,于是下面代码

         
    1
    2
    3
    4
    5
    6
         
    background: hsl(20, 40%, 90%);
    background-image:
    linear-gradient(90 deg, #fb3 11 px, transparent 0),
    linear-gradient(90 deg, #ab4 23 px, transparent 0),
    linear-gradient(90 deg, #655 41 px, transparent 0);
    background-size: 41 px 100%, 61 px 100%, 83 px 100%;
    07-3.png

    再想让它重复,早就超出屏幕的分辨率了。

    这个技巧被Alex Walker定名为“蝉原则”,通过质数来增加随机真实性。还可以用于其他涉及有规律重复的情况

    • 在图片库中,为每幅图片用细微的伪随机旋转效果时,可以使用:neth-child(a)选择符,且让a是质数。
    • 如果要生成一个动画,而且让它看起来不是按照明显的规律在循环时,可以应用多个时长为质数的动画。

    8. 连续的图像边框

    背景知识:css渐变、border-image、条纹背景、基本的css动画

    • border-image:指定作为元素周围边框的图像。基本原理就是九宫格伸缩法,把图片切割成九块,然后把它们应用到边框相应的边和角。结合实例继续说明

    有时候我们想把一幅图案或图片应用为边框,而不是背景。一个元素有一圈装饰性的边框,基本上就是一张图片被裁剪进了边框所在的方环区域,不仅如此,还希望这个元素的尺寸在扩大或缩小的时候,这幅图片都可以自动延伸并覆盖完整的边框区域。

    最简单的办法就是使用连个HTML元素,一个元素用来把图片设为背景,另一个元素存放内容

         
    1
    2
    3
    4
    5
         
    <div class="something">
    <div>I have a nice stone art border,
    don't I look pertty?
    </div>
    </div>
         
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
         
    .something {
    background: url( 'http://csssecrets.io/images/stone-art.jpg');
    background-size: cover;
    padding: 1em;
    }
    .something > div {
    background: white;
    padding: 1em;
    }
    08-1.png

    如何改进,使用一个元素?
    思路:在背景图片之上,再叠加一层纯白的实色背景,为了让下层的图片背景透过边框区域显现出来,需要给两层背景指定不同的background-clip值,最后一个要点在于,我们只能在多重背景的最底层设置背景色,因此需要一道从白色过渡到白色的css渐变来模拟纯白实色背景的效果

         
    1
    2
    3
    4
    5
    6
         
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white, white),
    url('http://csssecrets.io/images/stone-art.jpg');
    background-size: cover;
    background-clip: padding-box, border-box;
    08-2.png

    发现效果很接近,但是边框的图片有一种怪异的拼接效果。原因是background-origin的默认值是paddin-box,因此,图片的显示尺寸不仅取决于padding box的尺寸,而且被放置在了padding box的原点(左上角)。我们看到的实际上就是背景图片以平铺的方式蔓延到border box区域的效果。修改即可

         
    1
    2
    3
    4
    5
    6
    7
         
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white, white),
    url('http://csssecrets.io/images/stone-art.jpg');
    background-size: cover;
    background-clip: padding-box, border-box;
    background-origin:border-box;

    简写属性

         
    1
    2
    3
         
    background:
    linear-gradient(white, white) padding-box,
    url('http://csssecrets.io/images/stone-art.jpg') border-box 0 / cover;

    08-3.png

    这个技巧还可以运用到渐图案上,比如制作一个老式信封

         
    1
    2
    3
    4
    5
         
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white,white) padding-box,
    repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0,
    transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
    08-4.png

    上面例子可以很容易的通过background-size属性来改变条纹的宽度,通过border属性来改变整个边框的厚度。还可以用border-image来实现。

         
    1
    2
    3
    4
         
    padding: 1 em;
    border: 16 px solid transparent;
    border-image: 16 repeating-linear-gradient( -45deg, red 0, red 1 em, transparent 0,
    transparent 2 em, #58a 0, #58a 3 em, transparent 0, transparent 4 em);

    border-image也是一个复合属性,包含下面属性

    • border-image-source:用在边框的图片的路径
    • border-image-slice:图片边框向内偏移
    • border-image-width:图片边框的宽度
    • border-image-outset:边框图像区域超出边框的量
    • border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

    上面例子使用border-image实现,存在一些问题

    • 每当我们改变border-image-slice时,都要同时修改border-width来让它们匹配
    • 由于不能在border-image-slice属性中使用em单位,只能把边框厚度指定为像素单位
    • 条纹的宽度需要在色标的位置信息中写好。

    制作蚂蚁行军边框

    将边框的宽度减少至1px,修改条纹颜色,便可以出现虚线边框,然后background-size改为某个合适的值。添加动画

         
    1
         
    @ keyframes ants { to { background-position: 100%} }
         
    1
    2
    3
    4
    5
    6
         
    padding: 1em;
    border: 1px solid transparent;
    background:
    linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 /.6em .6em;
    animation: ants 12s linear infinite;
    08-5.png

    border-image也有它强大之处,尤其是在搭配渐变图案时。比如我们需要一个顶部边框被裁切的效果,就像一般的脚注一样。我们所需要的就是在border-image属性再加上一条由渐变生成的垂直条纹,并把要裁剪的长度在渐变中写好,边框的粗细由border-width来控制。

         
    1
    2
    3
         
    border-top: .15em solid transparent;
    border-image: 100% 0 0 linear-gradient(90 deg, currentColor 4 em, transparent 0);
    padding-top: .5em;
    08-6.png

    使用了currentColor属性,会根据color属性的变化而自动适应(假设我们希望这条边框跟文字保持相同颜色)

    correntColor:这是css3中一个颜色的关键字,这个关键字并没有绑定到一个固定的颜色,而是一直被解析为color。

    假如我们想要所有水平割线自动与文本颜色保持一致。可以这么写

         
    1
    2
    3
    4
         
    hr {
    height: . 5em;
    background: currentColor;
    }

    很多已有的属性也具有类似的行为。如果你没有给边框指定颜色,它会自动从文本颜色那里得到颜色。

    展开全文
  • 主要借助了 mask-image,一张图片上应用 mask-image: linear-gradient(0, rgba(0, 0, 0, 40%, transparent 60%);,透明的部分则会凸显出另外一张图。 再利用动画,让 mask-image: linear-gradient 的角度旋转起来...
    • 主要借助了 mask-image,一张图片上应用 mask-image: linear-gradient(0, rgba(0, 0, 0,1) 40%, transparent 60%);,透明的部分则会凸显出另外一张图。
    • 再利用动画,让 mask-image: linear-gradient 的角度旋转起来。

    在这里插入图片描述

    <div class="a"></div>
    <div class="b"></div>
    

    scss

    $img2: '图片地址';
    
    $img1: '图片地址';
    
    $count: 360;
    
    div {
        position: absolute;
        top:0;
        left: 0;
        width: 100vw;
        height: 100vh;
        
    }
    
    .a {
        background: url($img1);
        background-size: 100% auto;
    }
    
    .b {
        background: url($img2);
        background-size: 100% auto;
        mask-image: linear-gradient(0, rgba(0, 0, 0, 1) 40%, transparent 60%);
        mask-image-position: 50% 50%;
        animation: move 10s infinite;
    }
    
    @keyframes move {
        
        @for $i from 0 through $count {
            #{$i / $count * 100}% {
                mask-image: linear-gradient($i / $count * 360deg, rgba(0, 0, 0, 1) 40%, transparent 60%);
            }        
        }
    }
    
    展开全文
  • 一:若需要一个图片作为背景,而且有垂直方向的渐变效果,可渐变图像的高度是固定的,所以如果页面内容 的长度超过了图像的高度,那么渐变就会突然中止,若拉伸图像,会失真。 方案:添加一个背景色,与渐变底部...
  • 主要介绍了详解CSS背景渐变图片transtion过渡效果技巧的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • CSS背景图片平铺技巧

    万次阅读 2018-08-22 16:47:40
    使用CSS来设置背景图片同传统的做法一样简单,但相对于传统控制方式,CSS提供了更多的可控选项,我们先来看看最基本的设置图片的方法。 &lt;style type="text/css"&gt; #content { border:1...
  • .flex-wrapper { position: absolute; top: 0; bottom: 0; width: 100%; background: #f5f5f5 }
  • 我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的。   想知道怎么来实现嘛,...
  • CSS分割背景图片的技巧

    千次阅读 2011-11-22 22:31:54
    当然用这个技巧也要选对地方用才行,要是经常需要改动的图像用这个技术还是有点折腾的。 核心的属性是这个:background-position 参数值从w3schools找出来的 Property Values VALUE DESCRIPTION ...
  • CSS背景图像定位在布局过程中特别是背景图比较多的时候运用的比较广泛一些,在本文为大家详细介绍下有关背景图定位的知识及为什么会有负数,感兴趣的朋友可以参考下
  • CSS高级技巧:CSS Sprites

    2020-09-27 20:35:49
    上一篇CSS教程文章:CSS高级技巧:圆角矩形CSS Sprites, 利用CSS background-position 进行背景绝对定位, 减少HTTP请求, 加速网页显示, 解决图片载入闪动问题的技巧.CSS Sprites最适合用来做的, 恩, 比如: 清单导航的...
  • css3技巧背景渐变

    千次阅读 2016-07-23 14:18:06
    首先区分下,平常给的纯色background,指的是background-color属性,而渐变色所指向的是background-image属性,是作为背景图像处理的。 从渐变的形式分为2种:线性渐变(直线扩散)和径向渐变(从圆心扩散)。 ...
  • 背景图像可能是所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图片没有什么不寻常的,但是。。。。。。 1.如何将背景图像完美地适合视口 body { background-image: url('...
  • css技巧

    2011-01-09 16:20:00
    前台中要显示特定图片,可以在商品加二个属性,当做class或id,定义图片为css背景
  • 通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就来详解CSS制作Web页面条纹背景样式的技巧,需要的朋友可以参考下
  • CSS——CSS 背景应用

    千次阅读 2020-06-29 20:41:13
    文章目录基本属性背景图片(image)背景平铺(repeat)背景位置(position)背景附着背景简写背景透明(CSS3)背景图方位案例 基本属性 CSS 可以添加背景颜色和背景图片,以及来进行图片设置。 background-color 背景...
  • 移动端背景等比例缩放,一般实现方法是,直接使用css3的background-size,但是有缺陷,高度不能固定缩放, 如果高度background-size: 100% 100%; 图片会变形,还有实现方法是用js来控制高度。 如果用css来实现,...
  • 很多时候仅仅使用CSS无法做到美工设计的效果,为了能较大还原类似光晕等边框布局,我们一般采用背景图框定页面布局,在框内再进行许多组件或控件的布置。 比如背景图: 此时为了让组件正好的放入框内,也是为了方便...
  • CSS 背景全攻略

    2020-12-08 18:21:55
    这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...
  • 由于W3C准备中,背景图片并不支持伸缩功能。所以在IE和FF这两大浏览器中会有一些区别,在FF中的方法可谓简单,只需要用background-size则可以控制其随容器的大小而自动伸缩 例子如下 1 ....
  • CSS渐变背景的六个示例,个人觉得这是非常实用的一个常用技巧,不使用任何图片实现Div背景渐变,而且兼容IE和FF2,以后想要类似的效果,可有的参考了。
  • CSS background是最常用的CSS属性之一。然而,并不是所有开发人员都知道使用多种背景。这段时间都在关注使用多种背景场景。在本文中,会详细介绍background-image`属性,并结合图形来解释多个背景使用方式以及其实际...
  • CSS技巧:改变选择网页文字的背景色资料引用:http://www.knowsky.com/533360.html最近在访问一个网站的时候,我注意到,当其文字被选中时它有一个匹配他的网站的背景色,这个背景色通常是深蓝色。现在,如果您的网站...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,109
精华内容 12,443
关键字:

css技巧背景