установить цвет фона, но не на весь фон

Question

Можно ли установить фоновый цвет для элемента (svg в моем случае), но размер фона меньше фактического элемента?

Допустим, у вас есть div с шириной 300px и высотой 300px. Я хотел бы установить цвет фона только для области 200px x 200px.

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

Почему я спрашиваю? потому что мой элемент содержит прозрачность

Answer 1

Я не уверен, что это будет работать для объекта SVG, но он будет работать в HTML и CSS. Вы можете установить свойство box-sizing в border-box, а затем дать элементу border того же цвета, что и родительский элемент background-color. В приведенном ниже примере я устанавливаю родительские background-color и дочерние border-color на разные значения, чтобы вы имели представление о том, что происходит на самом деле.

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; 
 
}

<div></div>

Answer 2

Вы пытаетесь создать 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 3

Вы можете добавить обычный фон, а затем создать тень любого цвета, который вы предпочитаете на этом фоне. Это будет отображаться позади содержимого, поскольку обычный фон будет.

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>