我想从CSS功能区生成器中使用此代码,但仅需要某些特征图像 - 不是全部。
我有CSS和HTML。目前尚不清楚我将在我的孩子主题中包含哪个文件以使CSS工作。
我只想要某些特色图像的色带。我看到的所有插件都过时了。
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
}
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div class="box">
<div class="ribbon"><span>PREMIUM</span></div>
</div>
如何添加此代码以与特定的特征图像一起使用?
您可以通过将其与其他图像分开,然后使用JS将色带添加到仅满足某些标准的图像中。
在这里,我正在使用featured
类将图像与其他图像分开,然后使用JavaScript将ribbon
类添加到这些图像中。
let feat = document.querySelectorAll('.featured')
feat.forEach((img)=>{
img.classList.add('ribbon')
})
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
}
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div style="display:flex; justify-content: space-between; flex-wrap: wrap;">
<div class="box">
<div class="featured"><span>PREMIUM</span></div>
</div>
<div class="box">
<div class="featured"><span>PREMIUM</span></div>
</div>
<div class="box">
<div class=""><span>PREMIUM</span></div>
</div>
<div class="box">
<div class="featured"><span>PREMIUM</span></div>
</div>
<div class="box">
<div class=""><span>PREMIUM</span></div>
</div>
<div class="box">
<div class="featured"><span>PREMIUM</span></div>
</div>
</div>