日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

css如何給div添加一個條紋背景，在背景上畫一條有寬度的斜線

作者：ChangYan. 更新時間： 2023-07-08 編程語言

如圖，想要實現div的背景上有一條深色的斜線。
在這里插入圖片描述

這里主要使用的是css里的線性漸變屬性。

先看一下網上示例及效果：
示例一

<body>
    <div class="patterns pt1"></div>
    <div class="patterns pt2"></div>
    <div class="patterns pt3"></div>
</body>
<style>
          .patterns {
            width: 200px;
            height: 200px;
            float: left;
            margin: 10px;
            box-shadow: 0 1px 8px #666;
        }
        .pt1 {
            background-size: 50px 50px;
            background-color: #0ae;
            background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
            background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
        }
        .pt2 {
            background-size: 50px 50px;
            background-color: #0ae;
            background-image: -webkit-linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
            background-image: linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
        }
        .pt3 {
            background-size: 50px 50px;
            background-color: #0ae;
            background-image: -webkit-linear-gradient(-45deg,
            rgba(255, 255, 255, .2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .2) 50%,
            rgba(255, 255, 255, .2) 75%,
            transparent 75%,
            transparent);
            background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

        }
</style>

效果：
在這里插入圖片描述

示例二：

background: linear-gradient(45deg,red 0%,red 33.33%,yellow 33.33%,yellow 66.66%,green 66.66%,green 100%);

效果：
在這里插入圖片描述

可以看到，漸變屬性可以設置角度、條紋顏色、還有條紋的寬度。

所以，通過對比，就可以實現我自己的需求了，代碼如下：

    background: #536fc6;
    background-image: -webkit-linear-gradient(-30deg,
            transparent 0%,
            transparent 60%,
            rgb(76, 104, 184) 60%,
            rgb(76, 104, 184) 75%,
            transparent 75%,
            transparent);

代碼解釋：漸變的角度是-30度，然后0%~60%是透明的，也就是上邊設置的background的顏色，是比較淺的藍色。然后60%~75%是另外設置的顏色，也就是深藍色。75%~100%就是淺藍色。
然后實現出來就是我最上邊截圖的效果！

原文鏈接：https://blog.csdn.net/changyana/article/details/128822266

  • 上一篇：沒有了
  • 下一篇：沒有了
欄目分類
最近更新