Question

是否可以将背景颜色设置为元素（在我的情况下为svg），但背景的大小是否小于实际元素？

假设你有一个宽300像素，高300像素的div。我想将背景颜色设置为200px x 200px的区域。

<object class="tapes"  width="40%" type="image/svg+xml" data="element.svg">

我为什么这么问？因为我的元素包含透明度

Answer 1

您是否尝试使用图像创建div并使其部分显示为纯色？

<强> HTML：

<div>
<img alt="myImage" src="https://sarasoueidan.com/images/svg-vs-gif--circle-on-transparent-background.svg" />
</div>

<强> CSS：

div {
  width: 400px;
  height: 400px;
  border-style: solid;
  border-width: 5px;
}

div:before{
    position:absolute;
    z-index:-1;
    top:7%;
    left:2%;
    width:45%;
    height:50%;
    content:"";
    background-color:red;
}

可能不是最好的方法，但是哦，希望这可以帮助你！

Answer 2

您可以添加普通背景，然后在该背景上创建您喜欢的任何颜色的阴影。这仍将作为常规背景显示在内容背后。

div {
  height: 300px;
  width: 300px;
  background: red;
  -webkit-box-shadow: inset 0 0 0px 50px white;
  box-shadow: inset 0 0 0px 50px white;
  border: 1px solid black;
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan tellus tellus, vel iaculis ante bibendum quis. Nam molestie dictum libero, venenatis consectetur diam fermentum eget. Cras nulla mauris, vehicula sit amet dui id, hendrerit laoreet
  augue. Suspendisse id tellus nec felis suscipit vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin posuere sem vitae turpis porta, quis sagittis tortor </div>

Answer 3

我不确定这适用于SVG对象，但它可以在HTML和CSS中使用。您可以做的是将box-sizing属性设置为border-box，然后为元素border提供与父元素background-color相同的颜色。在下面的示例中，我将父级background-color和子级border-color设置为不同的值，以便您了解实际发生的情况。

＆＃13;

body {
  width: 100%;
  height: 185px;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccc;
}

div {
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  border: solid 25px #afafaf;
  background: orange;
}

＆＃13;

<div></div>

＆＃13;

设置背景颜色，但不是整个背景

3 个答案: