Question

This is my design, using google developer tools when I uncheck this scss code(marked) the background image fits in the rounded card.

我想将背景图像放入边框半径为 15px 的卡片标题中，但卡片标题的背景图像仍未显示。当我去谷歌开发者工具并取消选中它适合的 scss 代码时。我如何在我的编辑器中实现它以便保存适合图像的设计？

这是我的代码：

.card{
  margin: 125px 500px;
  border-radius: 15px;
}
.card-header{
  border-radius: 15px 15px 0 0;
  height: 120px;
  padding: 0;
  background-image: url("images/bg-pattern-card.svg");
  background-size: cover;
}

Answer 1

在 JS fiddle 中尝试并在浏览器的 HTML 检查器中检查 DOM 结构和样式时，我注意到 Bootstrap 似乎也为 .card-header:first-child 定义了 CSS 规则。如果您也为此设置/覆盖边界半径，它可能会起作用。（至少它在小提琴中做到了。）

.card {
  margin: 125px 500px;
  border-radius: 15px;
}
.card-header,
.card-header:first-child {
  border-radius: 15px 15px 0 0;
}
.card-header {
  height: 120px;
  padding: 0;
  background-image: url("images/bg-pattern-card.svg");
  background-size: cover;
}

如何通过 scss 代码实现 css 代码？

1 个答案: