Question

我是一个总菜鸟，对这个问题很抱歉。我正在尝试将我在h1文本后面设置的图像设置为圆形较软的角落，因此它不仅仅是一个粗糙的矩形。我只是通过制作一个模拟餐厅页面来练习我所知道的关于html和css的极少数事情，而我并没有学会如何做到这一点，但我一直在敲我的脑袋试图弄明白几个小时了。我可以将图像转换为带有border-radius的圆角：50px;但只有当它低于文本时。我正在用记事本++编写我的代码，如果它很重要，我不确定它是否与图片的分辨率或大小有关。在看到这里的一些建议后我也尝试将它放入div中，但没有运气。这是我的代码和一些截图：

HTML：

<!DOCTYPE HTML> 
<html> 
  <head>
    <title> Joe's Pizza Downtown GR </title>
    <link href="https://fonts.googleapis.com/css?family=Lobster" type="text/css" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
  <style> 
  </style>
  </head>
  <body>
    <div class="header">
    <h1> Joe's Pizza </h1> 
    </div>
  </body>
</html>

CSS：

h1 {
  font-family: Lobster;
  color: Orange;
  font-size: 64px;
  padding: 40px;
  text-align: center;
}

body {
  background-image: url("cool-background.jpg");
}

.header {
  background-image: url("pizza-pepperoni.jpg");
  height: 400px;
  background-position: center center;
  border-radius: 50px;
  background-repeat: no-repeat;
  margin: 20px;
}

Screenshot of rectangle behind text

感谢任何可以帮助的人:)

编辑：修复和最终解决方案谢谢！

Answer 1

看起来是因为背景图像没有扩展到它所分配的元素的远角，所以border-radius没有剪切图像。您可能只需要修改background-size属性，或者可能使用不同的图像。我在这里使用background-size: cover，这将导致图像拉伸以填充元素而不会扭曲宽高比。

h1 {
  font-family: Lobster;
  color: Orange;
  font-size: 64px;
  padding: 40px;
  text-align: center;
}

.header {
  background-image: url("https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg");
  height: 400px;
  background-position: center center;
  background-size: cover;
  border-radius: 50px;
  background-repeat: no-repeat;
  margin: 20px;
}

<div class="header">
  <h1> Joe's Pizza </h1>
</div>

背景图像CSS

1 个答案: