css 如何删除图像和只是放置颜色的图像

fnvucqvd 于 2022-12-05 发布在其他

关注(0)|答案(3)|浏览(123)

而不是图像，我想把颜色在那些斑点。
https://jsfiddle.net/rza8v51x/
图像设置在网格布局中，我想删除它们并添加颜色。
在图像的地方，我想在这些斑点添加颜色。
这就是我在代码中所要做的一切。
用颜色替换图像。
如何做到这一点？

.channel-browser__channels {
    border-top: 1px solid rgba(86,95,115,0.5);
    padding-top: 14px;
    margin-top: 24px;
}

.channel-browser__channel-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.channel-browser__channel-grid-item {
    position: relative;
}

.content-item-container--aspect-square .horizontal-content-browser__content-item{
  padding-top: 100%;
}

.horizontal-content-browser__content-item .horizontal-content-browser__fallback-image, .horizontal-content-browser__content-item .responsive-image-component {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 4px;
    background-color: #1a1a1a;
    background-color:red;
    -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
}

第一次

css

来源：https://stackoverflow.com/questions/74670252/how-to-remove-images-and-just-place-colors-in-place-of-the-images

3条答案

按热度按时间

tgabmvqs1#

删除div标签之间的整个img标签，然后添加一个类（如我在div标签“box-color-red”中所做的那样），或者根据需要调用该类，并设置背景样式：你想要什么颜色;||或者，如果您不需要在div类中声明的所有类，您可以删除div类中的文本，然后创建自己的类。否则，请保留它们，并适当命名一个新类，该新类将设置div颜色的样式，并确保类名中的空格也是正确的空格。
第一个

赞(0）回复(0）举报 2022-12-05

myzjeezk2#

这可能会让你走上正确的轨道，但你的网格是一个烂摊子
第一个

赞(0）回复(0）举报 2022-12-05

7uhlpewt3#

如果要在不更改HTML代码的情况下为图像添加覆盖颜色，一个快速的解决方案可能是向网格项添加::after。

/* 👇 Added this */
.channel-browser__channel-grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 👇 Edit color here */
  background-color: pink;
}

根据使用情况，可以使用此工具添加进一步的控制，以在覆盖颜色和图像之间切换显示。
示例：
第一次

赞(0）回复(0）举报 2022-12-05

我来回答

css 如何删除图像和只是放置颜色的图像

3条答案

相关问题

热门标签

最新问答