背景色を設定しますが、背景全体を設定することはできません

Question

背景色を要素（私の場合はsvg）に設定できますか？背景のサイズは実際の要素よりも小さくなりますか？

幅300px、高さ300pxのdivがあるとします。 200px x 200pxの領域に背景色を設定したいと思います。

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

私はなぜ尋ねるのですか？私の要素に透明度が含まれているため

Answer 1

私は、これはSVGオブジェクトのために働くだろうわからないんだけど、それはHTMLとCSSで動作します。あなたができることはbox-sizingプロパティをborder-boxに設定し、親要素のbackground-colorと同じ色の要素をborderに与えます。以下の例では、親の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>