如何在CSS psuedo元素之前/之后控制图像

我希望我的英语很好

所以我很难用伪元素制作图像

这是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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何控制图像的亮度?

来自分类Dev

如何在伪元素之前和之后在CSS中显示欧元符号

来自分类Dev

如何在NSTextView中控制图像附件的大小

来自分类Dev

如何在NSTextView中控制图像附件的大小

来自分类Dev

如何在发现的HTML元素之前插入整个CSS类?

来自分类Dev

如何在CSS中垂直居中伪元素图像?

来自分类Dev

CSS:如何在输入元素后添加图标/图像

来自分类Dev

如何在javascript中(没有CSS和HTML)在图像上绘制图像

来自分类Dev

如何在css中制作圆形图像

来自分类Dev

如何在CSS中锐化图像?

来自分类Dev

如何在CSS中用颜色覆盖图像?

来自分类Dev

如何在css中进行图像裁剪

来自分类Dev

如何在css中互相放置图像

来自分类Dev

如何在Pyppeteer中禁用图像/ CSS?

来自分类Dev

如何在CSS中使图像彼此对齐?

来自分类Dev

如何在CSS中保持图像的长宽比?

来自分类Dev

如何在css中进行图像裁剪

来自分类Dev

如何在 CSS 中添加图像叠加

来自分类Dev

如何在CSS中制作鬼元素?

来自分类Dev

如何在CSS中响应缩放元素

来自分类Dev

如何在CSS网格上移动元素?

来自分类Dev

如何在MailChimp RSS广告系列中控制图像的宽度

来自分类Dev

如何在iOS 7上更改重新排序控制图像

来自分类Dev

如何在tkinter按钮小部件上控制图像和文本之间的空间?

来自分类Dev

如何在后端 asp.net mvc 中控制图像的大小

来自分类Dev

如何使用数组/位图控制图像的大小?

来自分类Dev

如何在CSS内的图片元素上使用CSS填充?

来自分类Dev

给定元素之前和之后的元素的CSS选择器

来自分类Dev

如何使用CSS在元素之后但不在元素之前插入换行符?

Related 相关文章

热门标签

归档