背景图像CSS上的圆角

Question

I'm a total noob so sorry about this question. 我是一个总菜鸟，对这个问题很抱歉。 I'm trying to get an image that I have set behind my h1 text to have rounded softer corners so it isn't just a harsh rectangle. 我正在尝试将我在h1文本后面设置的图像设置为圆形较软的角落，因此它不仅仅是一个粗糙的矩形。 I'm simply practicing the very few things I know about html and css by making a mock restaurant page, and I didn't learn how to do this but I've been banging my head into the wall trying to figure it out for a couple of hours now. 我只是通过制作一个模拟餐厅页面来练习我所知道的关于html和css的极少数事情，而我并没有学会如何做到这一点，但我一直在敲我的脑袋试图弄明白几个小时了。 I can get the image to round-corners with border-radius: 50px; 我可以将图像转换为带有border-radius的圆角：50px; but only when it's below the text. 但只有当它低于文本时。 I'm writing my code in notepad++ if it matters and I'm not sure if it has something to do with the resolution or size of the picture. 我正在用记事本++编写我的代码，如果它很重要，我不确定它是否与图片的分辨率或大小有关。 I also tried putting it in a div after seeing some suggestions on here but no luck with that. 在看到这里的一些建议后我也尝试将它放入div中，但没有运气。 Here's my code and some screenshots: 这是我的代码和一些截图：

HTML: 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: 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 文本背后的矩形截图

Thanks anyone that can help :) 谢谢任何可以帮助的人:)

EDIT:Fixed and final solution thanks! 编辑：固定和最终解决方案谢谢！

Answer 1

Looks like it's because the background image isn't expanding to the far corners of the element it's assigned to, so the border-radius isn't clipping the image. 看起来是因为背景图像没有扩展到它所分配的元素的远角，因此border-radius不会剪切图像。 You likely just need to modify the background-size property, or potentially use a different image. 您可能只需要修改background-size属性，或者可能使用不同的图像。 I'm using background-size: cover here, which will cause the image to stretch to fill the element without distorting the aspect ratio. 我正在使用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 个解决方案

解决方案1
5 已采纳 2017-03-27 02:54:42

背景图像CSS上的圆角

问题描述

1 个解决方案

解决方案1 5 已采纳 2017-03-27 02:54:42

解决方案1
5 已采纳 2017-03-27 02:54:42