Css背景图像重复[重复]答案

【问题标题】：Css background image repeating [duplicate]Css背景图像重复[重复]
【发布时间】：2021-04-20 06:05:50
【问题描述】：

嗨，我的背景图片连续显示 5 次，我是 html 新手，我用谷歌搜索了一下，但找不到合适的词，我的文件中有这段代码

<!DOCTYPE html>
<html>
    <head>
        <title>'Cyclone development'</title>
        <link href="styles/main.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
<hl>Cyclone development</hl>   <img src="cyclone.jpeg" alt="Italian Trulli">
<p>Who are we ?<br></p>
   <ans> We are a development team dedicated towards coding we make coding videos on youtube 
    for our users to learn and develop.
</ans>
    </body>
</html>

这个在主css文件中

hl{
    color: rgb(0, 0, 0);
    padding: 10px 10px;
font-size: 80px;
background: url(macoswall.jpeg);
background-size: 120px 120px;
}

body{
    background: #999;
    font-family: arial;
}

p{
    color:rgb(255, 0, 0);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-style: italic, bold;
    background-color: rgb(0, 60, 255);
    background-size: 300px 100px;
}
ans{
    color:rgb(255, 0, 0);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-style: italic;
}

我的 hl 背景图像重复多次，同时显示为 this 我该如何解决？

【问题讨论】：

你试过background-repeat: no-repeat;吗？
只需阅读有关css background-repeat的文档
<hl> 标签是什么？
你的意思是背景图片重复5次还是不重复？

标签： html css web

【解决方案1】：

应该是这样的

body {
  background-image: url("paper.gif");
  background-repeat: no-repeat;
}

您可以查看MDN doc。此外，您可以将所有内容放入shorthand。

【讨论】：

【解决方案2】：

您可以使用 background-repeat 属性来解决此问题。

background-repeat: no-repeat;

您也可以尝试为您的 background-size 属性使用 'cover' 或 'contain'。

另外，使用十六进制颜色可能更容易，即

rgb(0,0,0) => #000
rgb(255,0,0) => #f00
rgb(255,255,255) => #fff

等等……

此外，对于内边距、边距等大多数属性，如果所有维度都相同，您可以只设置一个维度。

padding: 10px 10px => padding: 10px

我还建议设置根字体大小，然后为元素字体大小使用相对单位。这使得更改全局字体大小变得简单，例如在添加辅助功能控件时。

:root { font-size: 10px; }
h1 { font-size: 8rem; //== 80px}

【讨论】：

【解决方案3】：

因为你想要 h1 的背景：

hl{
    color: rgb(0, 0, 0);
    padding: 10px 10px;
    font-size: 80px;
    background: url(macoswall.jpeg);
    background-size: 120px 120px;
    background-repeat: no-repeat;
}

当然，我认为你应该使用 h1 而不是 hl 标签

【讨论】：