CSS小tips -- background原来可以批量设置

最新推荐文章于 2020-01-27 15:19:30 发布

Klingonsss

最新推荐文章于 2020-01-27 15:19:30 发布

阅读量303

点赞数

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

本文链接：https://blog.csdn.net/qq_15241071/article/details/80946850

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

今天无意中看到别人的代码批量设置了background，感觉打开了新世界的大门，不仅感慨自己css真的太弱了。

以下为例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bg</title>
<style type="text/css">
.bg{
width: 500px;
height: 600px;
background-color: #0e9593;
background-image:
radial-gradient(circle, #f0f 10%, transparent 30%),
radial-gradient(circle, #e9c1ff 10%, transparent 30%),
radial-gradient(circle, #3aa2ff 10%, transparent 30%),
radial-gradient(circle, #ff1751 10%, transparent 30%),
radial-gradient(circle, #291dff 10%, transparent 30%),
radial-gradient(circle, #133848 10%, transparent 30%),
radial-gradient(circle, #3ef01a 10%, transparent 30%),
radial-gradient(circle, #0f132a 10%, transparent 30%);
background-size: 10% 10%, 6% 6%, 8% 8%, 8% 8%, 6% 6%, 6% 6%, 8% 8%, 7% 7%;
background-position: 45% 30%, 25% 55%, 20% 90%, 40% 60%, 5% 50%, 58% 10%, 58% 60%, 50% 80%;
background-repeat: no-repeat;
}
</style>
</head>
<body>

</div>

</body>

</html>

以颜色一一对应设置的呢。

效果如图：

Klingonsss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS小tips -- background原来可以批量设置

今天无意中看到别人的代码批量设置了background，感觉打开了新世界的大门，不仅感慨自己css真的太弱了。以下为例子：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;bg&lt;/title&gt;
复制链接

扫一扫