Fatal编程技术网
  • css/
  • Css 在不影响图像的情况下，使用背景图像在文本周围创建边框

Css 在不影响图像的情况下，使用背景图像在文本周围创建边框

css

Css 在不影响图像的情况下，使用背景图像在文本周围创建边框,css,background,background-image,border,Css,Background,Background Image,Border,我有一个背景图像，上面有h1和段落标记。我希望在h1标签周围创建一个边框，而不影响页眉的填充或边距。当我创建边框时，它将包围文本和顶部填充。是否有办法仅在文本周围应用边框 完整的代码在JSFIDLE上 CSS代码如下所示： header { background-image: url("https://images.pexels.com/photos/8263/pexels- photo.jpg?w=940&h=650&auto=compress&cs=tinys

我有一个背景图像，上面有h1和段落标记。我希望在h1标签周围创建一个边框，而不影响页眉的填充或边距。当我创建边框时，它将包围文本和顶部填充。是否有办法仅在文本周围应用边框

完整的代码在JSFIDLE上

CSS代码如下所示：

header {
    background-image: url("https://images.pexels.com/photos/8263/pexels-
photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
    height: 500px;
    padding: 0;
    margin: 0;
    background-attachment: fixed;
    background-size: cover;
    text-transform: capitalize;
}

h1 {
    color: black;
    text-align: center;
    display: block;
    font-size: 50px;
    padding-top: 180px;
    margin: 0;
}
这就是你想要的吗？

下面是用于获得效果的代码。如果您愿意，您可以使用H1的填充和边距来将其隔开

正文{
背景色：#404040；
}
标题{
背景图像：url（“https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
高度：500px；
填充：0；
保证金：0；
背景附件：固定；
背景尺寸：封面；
文本转换：大写；
填充顶部：180px；
文本对齐：居中；
}
h1{
颜色：白色；
文本对齐：居中；
字体大小：50px；
填充：0px；
边框：1px实心#000000；
显示：内联块；
保证金：0自动；
线高：40px；
}
p{
颜色：白色；
文本对齐：居中；
字体大小：30px；
}

吉他套
这是一个上传我的吉他封面与世界分享的新页面
我走了另一条路，用
填充顶部，在
H1
周围创建了一个包装器





吉他套
这是一个上传我的吉他封面与世界分享的新页面

身体{
背景色：#404040；
}
标题{
背景图像：url（“https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
高度：500px；
填充：0；
保证金：0；
背景附件：固定；
背景尺寸：封面；
文本转换：大写；
}
#h1_环绕{
填充顶部：180px；
}
h1{
颜色：白色；
文本对齐：居中；
显示：块；
字体大小：50px；
保证金：自动；
边框：1px实心#FF0000；
宽度：350px；
}
p{
颜色：白色；
文本对齐：居中；
字体大小：30px；
}

非常感谢，这正是我想要的。很高兴我能帮忙：-）这也是一个很好的解决方案。我想唯一的方法就是将头声明与h1的头声明分开。谢谢你的努力。

<body>
    <header>
        <div id="h1_surround">

  <h1>Guitar Covers</h1>
  </div>
        <p>This is a new page for uploading my Guitar Covers to share with the world</p>
    </header>
</body>



body{
    background-color: #404040;
}

header{
    background-image: url("https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
    height: 500px;
    padding: 0;
    margin: 0;
    background-attachment: fixed;
    background-size: cover;
    text-transform: capitalize;
}
#h1_surround{
  padding-top:180px;
}
h1{
    color: white;
    text-align: center;
    display: block;
    font-size: 50px;
    margin: auto;
  border:1px solid #FF0000;
  width:350px;
}
p{
    color: white;
    text-align: center;
    font-size: 30px;
}