文章/答案/技术大牛

发布

社区首页 >问答首页 >是否可以同时使用重复线性梯度属性来设置边框图像和背景？

问是否可以同时使用重复线性梯度属性来设置边框图像和背景？
EN

Stack Overflow用户

提问于 2020-03-06 19:12:18

回答 1查看 211关注 0票数 1

我尝试使用repeating-linear-gradient选项设置border-image和background属性，但同一个<div>元素使用不同的值。我不知道怎么做，因为在我的尝试中，渐变参数似乎是重叠的，而且页面似乎也采用了最后设置的值。

下面是我得到的代码和输出：

body {
    margin: 0;
    background:
    linear-gradient(217deg, rgba(255,0,0, .8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0, .8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255, .8), rgba(0,0,255,0) 70.71%);
}

.under_banner {
    width: 100%;
    height: 20%;
    top: 80%;
    border-width: 10px 0 0 0;
    border-style: solid;
    border-image: repeating-linear-gradient(145deg, #ff0000, #ff9020 50%);
    background: repeating-linear-gradient(130deg, #f6d808, #ffc107 10%);
    text-align: center;
    line-height: 10px;
    position: fixed;
    z-index: 1;
}

<body>
  <div class="under_banner">
    <p>Hello StackOverflow Community!</p>
  </div>
</body>

如您所见，.under_banner具有top-border属性，实际上repeating-linear-gradient与background不对称。如果可能的话，我想用一个div为每个属性得到不同的渐变。

提前谢谢你！

html

css

linear-gradients

repeating-linear-gradient

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-06 19:19:32

您可以使用多个背景：

body {
    background:
    linear-gradient(217deg, rgba(255,0,0, .8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0, .8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255, .8), rgba(0,0,255,0) 70.71%);
}

.under_banner {
    width: 100%;
    left:0;
    height: 20%;
    bottom:0;
    background: 
      repeating-linear-gradient(130deg, #f6d808, #ffc107 10%) bottom/100% calc(100% - 10px),
      repeating-linear-gradient(145deg, #ff0000, #ff9020 50%);
    background-repeat:no-repeat;
    text-align: center;
    line-height: 10px;
    position: fixed;
    z-index: 1;
}

<body>
  <div class="under_banner">
    <p>Hello StackOverflow Community!</p>
  </div>
</body>

或者像下面这样调整您的代码，您只是缺少了slice属性：

body {
    background:
    linear-gradient(217deg, rgba(255,0,0, .8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0, .8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255, .8), rgba(0,0,255,0) 70.71%);
}

.under_banner {
    width: 100%;
    left:0;
    height: 20%;
    bottom:0;
    border-width: 10px 0 0 0;
    border-style: solid;
    border-image: repeating-linear-gradient(145deg, #ff0000, #ff9020 50%) 10; /* added the slice here */
    background: repeating-linear-gradient(130deg, #f6d808, #ffc107 10%);
    text-align: center;
    line-height: 10px;
    position: fixed;
    z-index: 1;
}

<body>
  <div class="under_banner">
    <p>Hello StackOverflow Community!</p>
  </div>
</body>

更多详细信息，请访问：border-image-slice for gradient border image

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60562920

复制

相似问题

问是否可以同时使用重复线性梯度属性来设置边框图像和背景？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以同时使用重复线性梯度属性来设置边框图像和背景？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以同时使用重复线性梯度属性来设置边框图像和背景？
EN