zoukankan      html  css  js  c++  java
  • 文字阴影和背景缩放、背景线性渐变、多背景以及透明度

    一、文字阴影 text-shadow
    text-shadow: h-shadow v-shadow blur color;

    文字阴影:水平位置,垂直位置,模糊距离,阴影的颜色。

     <span>前端</span>
    span{
                font-size: 50px;
                color: red;
                text-shadow: 5px 5px 5px #FF0000;
            }

    二、背景图缩放 background-size
    background-size 属性规定背景图像的尺寸。
    background-size: length|percentage|cover|contain;

    length:设置背景图像的高度和宽度。如果只设置一个值,则第二个值会被设置为 "auto"。

    percentage:以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值,则第二个值会被设置为 "auto"。

    cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。(以最短边为准)

    contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。背景定位区域可能无法填满。(以最长边为边)

    适用于移动端的2倍背景图,需要缩小背景图在定位。

    三、CSS3 渐变(Gradients)

    CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

    SS3 定义了两种类型的渐变(gradients):

    线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

    径向渐变(Radial Gradients)- 由它们的中心定义


    单一:background: linear-gradient(起始位置, 颜色, 颜色, ...);

    多:background: linear-gradient(起始位置, 颜色 位置(百分比), 颜色 位置(百分比), ...);

    为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。

    同时,你也可以设置一个起点和一个方向(或一个角度)。

    径向渐变待补…………

    四、多背景

    backround:url(1.jpg)no-repeat left top,url(2.jpg)no-repeat right bottom,…………

    注意:

    1.定位的背景要写在不同的位置上,不然会发生重叠

    2.做多背景时,背景的颜色要单独写在后面,不然会重叠

    五、透明度 opacity

    从 0.0 (完全透明)到 1.0(完全不透明)。

        <div class="box1">盒子的背景透明</div>
        <div class="box2">盒子的文字都透明</div>
        <div class="box3">盒子里的文字和背景都透明</div>
            div{
                height: 200px;
                width: 200px;
            }
            .box1{
                background-color: rgba(148, 53, 53, 0.281);
            }
            .box2{
                color: rgba(148, 53, 53, 0.281);
            }
            .box3{
                background: rgb(148, 53, 53);
                opacity: 0.281;
            }

  • 相关阅读:
    .net AJAX运行错误 未能加载文件或程序集 "System.Web....”的解决办法
    mysql免安装版使用方法
    XP下IIS+php 5.2.4配置
    distinct order by
    手机操作系统介绍
    .net自带 SQL Server 2005 Express使用
    统计字符串数组中每个字符串所出现的次数
    juqery 学习之三 选择器<层级><基本>
    juqery 学习之三 选择器<简单><内容>
    juqery 学习之三 选择器<可见性><元素属性>
  • 原文地址:https://www.cnblogs.com/EricZLin/p/8875683.html
Copyright © 2011-2022 走看看