垂直和水平居中后不显示线性渐变

问题描述：

当我将页面居中和垂直居中时，背景渐变不起作用。下面的代码：垂直和水平居中后不显示线性渐变

body { 
 
    background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%); 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<h1>Lorem Ipsum</h1>

JsFiddle

I tried that as well，但它不是工作压力太大，除非我补充保证金的身体，我不想在那里。

谢谢。

答

由于您的body设置为绝对，因此您的html的大小为0。将你的html设置为100％的高度将解决它。

html { 
 
    height: 100%; 
 
} 
 

 
body{ 
 
    background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%); 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<h1>Lorem Ipsum</h1>

感谢的人！它解决了我的问题。 – Null

答

试试这个，身体需要采取屏幕的所有高度：

body{ 
 
    background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%); 
 
    margin: 0; 
 
    height:100vh; 
 
} 
 

 
div.block{ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="block"> 
 
    <h1>Lorem Ipsum</h1> 
 
</div>

垂直和水平居中后不显示线性渐变

相关推荐