我的网站页眉和页脚上的背景图片无法全屏显示。
我尝试使用background-size:cover; 更改背景图像,屏幕尺寸,显示,添加最小宽度
HTML
<header>
<h1>
<svg viewBox="-30 25 480 400">
<path id="curve" d="M10 75 Q 80 25 500 90" />
<text font-size="30" width="500">
<textPath xlink:href="#curve">
Porcelian Corporation "L&J"
</textPath>
</text>
</svg>
</h1>
</header>
<div class="logo">
<img src="css/logo3.png" alt="logo" class="logopic">
</div>
CSS
header {
background-image: url('patt.jpg');
height: 17em;
width: 100%;
box-shadow: 0px 8px 96px -17px rgba(31, 60, 87, 0.7);
}
.logo {
margin-left: 5%;
border-top: 1px solid rgba(78, 127, 136, 0.9);
border-left: 1px solid rgba(78, 127, 136, 0.9);
border-right: 1px solid rgba(78, 127, 136, 0.9);
border-bottom: 1px solid rgba(78, 127, 136, 0.9);
background: rgba(144, 190, 214, 0.7);
height: 22em;
width: 22em;
margin-top: -15%;
z-index: 3;
position: relative;
}
.logopic {
height: 22em;
width: 22em;
margin: 1%;
margin-top: 1%;
cursor: pointer;
}
h1 {
font-family: "Bevan-Regular";
text-align: center;
height: 2em;
width: 15em;
background-color: rgba(144, 190, 214, 0.7);
display: inline-block;
color: rgba(57, 70, 36, 0.8);
font-size: 3em;
padding: 0;
margin: 0 auto;
margin-top:1%;
margin-left: 30%;
border: 1px solid rgba(78, 127, 136, 0.9);
}
svg {
display: inline-block;
}
path {
fill: transparent;
}
text {
fill: rgba(11, 22, 27, 0.8);
}
答案 0 :(得分:0)
您必须将 h1
标签宽度设置为100%,否则它将溢出到页面宽度:
h1{
font-family: "Bevan-Regular";
text-align: center;
height: 2em;
width: 100%;
background-color: rgba(144, 190, 214, 0.7);
display: inline-block;
color: rgba(57, 70, 36, 0.8);
font-size: 3em;
padding: 0;
margin: 0 auto;
border: 1px solid rgba(78, 127, 136, 0.9);
}
检查以下小提琴:
header{
background-image: url('patt.jpg');
height: 17em;
background-size:100%;
}
.logo{
margin-left: 5%;
border-top: 1px solid rgba(78, 127, 136, 0.9);
border-left: 1px solid rgba(78, 127, 136, 0.9);
border-right: 1px solid rgba(78, 127, 136, 0.9);
border-bottom: 1px solid rgba(78, 127, 136, 0.9);
background: rgba(144, 190, 214, 0.7);
height: 22em;
width: 22em;
margin-top: -15%;
z-index: 3;
position: relative;
}
.logopic {
height: 22em;
width: 22em;
margin: 1%;
margin-top: 1%;
cursor: pointer;
}
h1{
font-family: "Bevan-Regular";
text-align: center;
height: 2em;
width: 100%;
background-color: rgba(144, 190, 214, 0.7);
display: inline-block;
color: rgba(57, 70, 36, 0.8);
font-size: 3em;
padding: 0;
margin: 0 auto;
border: 1px solid rgba(78, 127, 136, 0.9);
}
svg{
display: inline-block;
}
path{
fill: transparent;
}
text{
fill: rgba(11, 22, 27, 0.8);
}
<header>
<h1>
<svg viewBox="-30 25 480 400">
<path id="curve" d="M10 75 Q 80 25 500 90" />
<text font-size="30" width="500">
<textPath xlink:href="#curve">
Porcelian Corporation "L&J"
</textPath>
</text>
</svg>
</h1>
</header>
<div class="logo">
<img src="css/logo3.png" alt="logo" class="logopic">
</div>