CSS background

最新推荐文章于 2024-08-28 23:58:56 发布

卋舉

最新推荐文章于 2024-08-28 23:58:56 发布

阅读量79

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/W_SJ_SY/article/details/120660040

版权

CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

默认平铺 background-imgae:url("image/o.jpg:);
不平铺 background-repeat:no-repeat;
水平重复 background-repeat:repeat-x;
垂直重复 background-repeat:repeat-u;
位置(position) background-position:cneter;
填充 background-image:linear-gradient(30deg green 20% red); 角度(deg)
圆环效果 background-image:radial-gradient();

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Title</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- 默认平铺 background-image:url("image/o.jpg");
        不平铺 background-repeat:no-repeat
        水平重复 background-repeat:repeat-x;
        垂直重复 background-repeat:repeat-y;
        位置 background-position:center;
        填充 background-image:linear-gradient(30deg green 20%,red);  角度(deg);
        圆环效果 background-image:radial-gradient()
     -->
    <style>
        @font-face {
            font-family: "caoshu";
            src: url("fonts/caoshu.TTF");
        }

        body {
            /*默认平铺*/
            background-image: url("images/o.jpg");
            /*不平铺 background-repeat:no-repeat
              水平重复 background-repeat:repeat-x
              垂直重复 background-repeat:repeat-y*/
            background-repeat: no-repeat;
            /*位置(position) background-position:center*/
            background-position: center;
        }

        .box {
            background-color: aqua;
            width: 500px;
            height: 300px;
            font: 25px/25px 'caoshu';
            color: #f3b4b4;
            /*填充 background-image:linear-gradient*/
            /*角度 deg*/
            /*background-image: linear-gradient(30deg, green 20%, blue, greenyellow, aquamarine, palevioletred);*/
            background-image: url("images/k2.png");
            background-size: 100% 100%;
        }

        .ad {
            width: 300px;
            height: 300px;
            /*圆角*/
            border-radius: 50%;
            border: 1px dashed gray;
            /*圆环效果 background-image:radial-gradient()*/
            background-image: radial-gradient(aqua, greenyellow, deepskyblue, palevioletred, forestgreen);
        }
    </style>
</head>
<body>
<div class="ad"></div>
<div class="box">雪中悍刀行</div>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>

卋舉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS background

默认平铺 background-imgae:url("image/o.jpg:);不平铺 background-repeat:no-repeat;水平重复 background-repeat:repeat-x;垂直重复 background-repeat:repeat-u;位置(position) background-position:cneter;填充 background-image:linear-gradient(30deg green 20% red); 角度(deg)圆环效果 bac
复制链接

扫一扫

专栏目录