Html 背景图像CSS上的圆角_Html_Css

Html 背景图像CSS上的圆角

html css

Html 背景图像CSS上的圆角,html,css,Html,Css,我对这个问题感到非常抱歉。我试图得到一个图像，我已经设置在我的h1文本后面，使其具有更柔和的圆角，这样它就不仅仅是一个粗糙的矩形。我只是通过制作一个模拟餐厅页面来练习我所知道的关于html和css的极少数事情，我没有学会如何做，但我已经用了好几个小时的时间拼命想弄明白。我可以得到的图像圆角与边界半径：50px；但只有当它在文本下方时。我正在用notepad++编写代码，如果这很重要的话，我不确定它是否与图片的分辨率或大小有关。在这里看到一些建议后，我也试着把它放在一个div中，但没有成功。以下是

我对这个问题感到非常抱歉。我试图得到一个图像，我已经设置在我的h1文本后面，使其具有更柔和的圆角，这样它就不仅仅是一个粗糙的矩形。我只是通过制作一个模拟餐厅页面来练习我所知道的关于html和css的极少数事情，我没有学会如何做，但我已经用了好几个小时的时间拼命想弄明白。我可以得到的图像圆角与边界半径：50px；但只有当它在文本下方时。我正在用notepad++编写代码，如果这很重要的话，我不确定它是否与图片的分辨率或大小有关。在这里看到一些建议后，我也试着把它放在一个div中，但没有成功。以下是我的代码和一些屏幕截图：

HTML:

谢谢任何能帮忙的人：）

编辑：固定和最终解决方案，谢谢！

看起来是因为背景图像没有扩展到指定元素的远角，所以

边框半径

没有剪裁图像。您可能只需要修改

background size

属性，或者可能使用不同的图像。我在这里使用的是

背景尺寸：cover

，这将导致图像拉伸以填充元素，而不会扭曲纵横比

h1{
字体家族：龙虾；
颜色：橙色；
字体大小：64px；
填充：40px；
文本对齐：居中；
}
.标题{
背景图像：url（“https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg");
高度：400px；
背景位置：中心；
背景尺寸：封面；
边界半径：50px；
背景重复：无重复；
利润率：20px；
}


乔的比萨饼

您的背景没有扩展到元素的宽度。您应该尝试更改

背景大小

属性。通过使用

背景尺寸：cover

您应该可以看到它正在工作，但不确定这是否是您真正想要使用的。谢谢！这起作用了：）我现在不是真的追求美学，只是想让它发挥作用。太棒了，不客气。让我知道你是否想让我把它作为答案提交。是的，当然。谢谢@MichaelCoker在这里对HTML也相当陌生，但是您是否能够直接在HTML中引用图像，然后在CSS中使用z索引引用将其放置在h1文本后面

用于HTML，然后

img{position:absolute；border radius:50px；margin top:200px；z-index:-1；}

用于CSS。@Jret是的，或者您可以将边框半径应用于父元素，并使用overflow:hidden隐藏图像溢出@SirBilrach awesome，不客气。一旦你觉得问题解决了，一定要选择它作为解决方案。我对图像的宽度有问题，所以如果将来有人有同样的问题，尝试这样做，我就弄乱了边距，改变了宽度，以获得我从一开始就设想的宽度，下面是我做的div代码：“

.header{background image:url（“pizza pepperoni.jpg”）；背景位置：中心；边框半径：50px；背景重复：不重复；背景大小：封面；宽度：50%；边距：自动；}

我喜欢你的答案

<!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>

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;
}