css3神奇的背景控制屬性+使用顏色過渡實作漂亮的漸變效果-有解無憂

css3背景影像相關

兼容性：IE9+

background-clip 背景圖片繪制區域

background-clip:border-box; 內容區

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) center;
        padding:50px;
        border:50px solid transparent;
        background-clip:content-box;
        /*background-clip:padding-box;*/
        /*background-clip:border-box;*/
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-clip:padding-box; padding區域

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) center;
        padding:50px;
        border:50px solid transparent;
        background-clip:padding-box;
        /*background-clip:border-box;*/
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-clip:border-box; border區域

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) center;
        padding:50px;
        border:50px solid transparent;
        background-clip:border-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-origin: content-box | padding-box | border-box; 背景圖片起始位置

背景圖片從border-box開始水平垂直向下偏移50px

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:border-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片從padding-box開始水平垂直向下偏移50px

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:padding-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片從content-box開始水平垂直向下偏移50px

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:content-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-size: 填寫數值或者百分比時，如果只填寫一個值，另一個值默認為auto

cover 等比縮放填滿容器

contain 等比縮放至一邊碰到容器邊

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p2.jpg) 50px 50px no-repeat;
        background-size:100%;/*寬度為容器寬度的100%，高度按圖片比例來*/
        background-size:100% 100%;/*寬度為容器寬度的100%，高度為容器高度的100%*/
        background-size:cover;
        background-size:contain;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

多重背景圖片

background-image:url(),url();

前面的圖片會覆寫后面的圖片

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background-image:url(source/shuiyin.png), url(source/cat.jpg);

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

顏色設定為透明：transparent

css3漸變

兼容性：IE10

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(pink, orange, #abcdef);/*默認是垂直方向*/
        background:   -moz-linear-gradient(pink, orange, #abcdef);/*默認是垂直方向*/
        background:     -o-linear-gradient(pink, orange, #abcdef);/*默認是垂直方向*/
        background:        linear-gradient(pink, orange, #abcdef);/*默認是垂直方向*/

        background:-webkit-linear-gradient(left, pink, orange, #abcdef);/*從左到右*/
        background:   -moz-linear-gradient(right, pink, orange, #abcdef);
        background:     -o-linear-gradient(right, pink, orange, #abcdef);
        background:        linear-gradient(to right, pink, orange, #abcdef);

        background:-webkit-linear-gradient(left top, pink, orange, #abcdef);/*從左上到右下*/
        background:   -moz-linear-gradient(right bottom, pink, orange, #abcdef);
        background:     -o-linear-gradient(right bottom, pink, orange, #abcdef);
        background:        linear-gradient(to right bottom, pink, orange, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

正常情況下線性漸變的角度

webkit內核下線性漸變的角度

解決方法：兼容瀏覽器的前綴按順序書寫，正常情況下無前綴的放在最后

顏色可以具體分配位置

第一個顏色不寫默認是0%的位置；最后一個顏色默認是100%的位置

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(45deg, pink, orange, #abcdef);/*具體角度表示*/
        background:   -moz-linear-gradient(45deg, pink, orange, #abcdef);
        background:     -o-linear-gradient(45deg, pink, orange, #abcdef);
        background:        linear-gradient(45deg, pink, orange, #abcdef);

        background:-webkit-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background:   -moz-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background:     -o-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background:        linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

rgba() 可以設定帶透明色的漸變

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));/*具體角度表示*/
        background:   -moz-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
        background:     -o-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
        background:        linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

重復漸變

repeating-linear-gradient

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background:   -moz-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background:     -o-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background:        repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

徑向漸變 radial-gradient

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 400px;
        height: 200px;
        border-radius:50%;
        background:-webkit-radial-gradient(pink, #abcdef);
        background:   -moz-radial-gradient(pink, #abcdef);
        background:     -o-radial-gradient(pink, #abcdef);
        background:        radial-gradient(pink, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

保持圓形漸變

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 400px;
        height: 200px;
        border-radius:50%;
        background:-webkit-radial-gradient(circle, pink, #abcdef);
        background:   -moz-radial-gradient(circle, pink, #abcdef);
        background:     -o-radial-gradient(circle, pink, #abcdef);
        background:        radial-gradient(circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

尺寸大小 closest-side closest-corner farthest-side farthest-corner

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        border-radius:50%;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
/*        background:-webkit-radial-gradient(circle, pink, #abcdef);
        background:   -moz-radial-gradient(circle, pink, #abcdef);
        background:     -o-radial-gradient(circle, pink, #abcdef);
        background:        radial-gradient(circle, pink, #abcdef);*/
    }
    div:nth-child(1){
        background:-webkit-radial-gradient(closest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(closest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(closest-side circle, pink, #abcdef);
        background:        radial-gradient(closest-side circle, pink, #abcdef);
    }
    div:nth-child(2){
        background:-webkit-radial-gradient(closest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(closest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(closest-corner circle, pink, #abcdef);
        background:        radial-gradient(closest-corner circle, pink, #abcdef);
    }
    div:nth-child(3){
        background:-webkit-radial-gradient(farthest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(farthest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(farthest-side circle, pink, #abcdef);
        background:        radial-gradient(farthest-side circle, pink, #abcdef);
    }
    div:nth-child(4){
        background:-webkit-radial-gradient(farthest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(farthest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(farthest-corner circle, pink, #abcdef);
        background:        radial-gradient(farthest-corner circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div>closest-side</div>
    <div>closest-corner</div>
    <div>farthest-side</div>
    <div>farthest-corner</div>
</body>
</html>

設定漸變的圓心位置

水平方向為寬度的10%，垂直方向為高度的20%

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
/*        background:-webkit-radial-gradient(circle, pink, #abcdef);
        background:   -moz-radial-gradient(circle, pink, #abcdef);
        background:     -o-radial-gradient(circle, pink, #abcdef);
        background:        radial-gradient(circle, pink, #abcdef);*/
    }
    div:nth-child(1){
        background:-webkit-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
    }
    div:nth-child(2){
        background:-webkit-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
    }
    div:nth-child(3){
        background:-webkit-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
    }
    div:nth-child(4){
        background:-webkit-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background:   -moz-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background:     -o-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background:        radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div>closest-side</div>
    <div>closest-corner</div>
    <div>farthest-side</div>
    <div>farthest-corner</div>
</body>
</html>

repeating-radial-gradient 重復徑向漸變

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
        background:-webkit-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:   -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:     -o-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:        repeating-radial-gradient(circle, pink, #abcdef 20%);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>

IE瀏覽器漸變

IE10+ 支持gradient 漸變

IE6-8 使用filter

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
        background:-webkit-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:   -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:     -o-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background:        repeating-radial-gradient(circle, pink, #abcdef 20%);
        filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=pink,endcolorstr=#abcdef,gradientType=1);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>

使用IE控制臺可切換IE瀏覽器版本

IE filter

0 從左到右線性漸變

1 從上到下線性漸變

實際案例：

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 600px;
        height: 300px;
        background-color:#abcdef;
        background-size:100px 100px;
        background-image:-webkit-linear-gradient(45deg, pink 25%, transparent 25%),
                         -webkit-linear-gradient(-45deg, pink 25%, transparent 25%),
                         -webkit-linear-gradient(45deg, transparent 75%, pink 75%),
                         -webkit-linear-gradient(-45deg, transparent 75%, pink 75%);
        background-image:-moz-linear-gradient(45deg, pink 25%, transparent 25%),
                         -moz-linear-gradient(-45deg, pink 25%, transparent 25%),
                         -moz-linear-gradient(45deg, transparent 75%, pink 75%),
                         -moz-linear-gradient(-45deg, transparent 75%, pink 75%);
        background-image:-o-linear-gradient(45deg, pink 25%, transparent 25%),
                         -o-linear-gradient(-45deg, pink 25%, transparent 25%),
                         -o-linear-gradient(45deg, transparent 75%, pink 75%),
                         -o-linear-gradient(-45deg, transparent 75%, pink 75%);
        background-image:linear-gradient(45deg, pink 25%, transparent 25%),
                         linear-gradient(-45deg, pink 25%, transparent 25%),
                         linear-gradient(45deg, transparent 75%, pink 75%),
                         linear-gradient(-45deg, transparent 75%, pink 75%);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/77861.html

標籤：Html/Css

上一篇：css3神奇的圓角邊框、陰影框及其圖片邊框

下一篇：CSS3中新增的對文本和字體的設定