所以我很难用伪元素制作图像
这是HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>
这是CSS:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('./Path\ [email protected]');
position: absolute;
display: inline-block;
background-size: 30% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
我希望图像占据宽度的100%,而不是像那样重复,因为图像可能太小,但找不到更大的图像
先感谢您
试试看,我添加了background-repeat: no-repeat;
,然后将背景大小更改为background-size: 100% 100%;
在这里查看工作示例:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('https://i.imgur.com/TEKMxzx.png');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
background-size: 100% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句