如何通過拉伸使背景影像覆寫 div，從而使整個影像始終可見，而不是像 background-size:cover 那樣縱橫比不會改變？
它不是固定的寬度，它必須是回應式的。
div {
position: relative;
&:after {
content: ' ';
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0.3;
background-image: url('/something.svg');
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
}
我試過 background-size: 100% 100%，也試過 img 標簽。
謝謝！
uj5u.com熱心網友回復：
如果拉伸不是問題，那么對于 img 標簽
<style>
img{
/*
Control only width or height if u don't want it to stretch. If that's not a problem then you can
control both of it */
width:100%;
height:100%;
}
</style>
<img src="/something.svg" />
對于背景圖片：
<style>
div{
width:100%;
height:100%;
background:url("/something.svg");
background-size:100%;
background-repeat:no-repeat;
}
</style>
<div></div>
uj5u.com熱心網友回復：
事實證明，實際 svg 中也存在問題。下面的解決方案：
div {
position: relative;
&:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
}
我從我的 svg 中洗掉了高度和寬度引數，并添加了：preserveAspectRatio="none"
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/338620.html