Question

我的背景图片顶部带有h1和段落标记。我希望在h1标签周围创建一个边框，而不会影响标题的填充或边距。当我创建边框时，它会围绕文本和顶部填充。有没有办法在文本周围应用边框？

完整的代码在JSFiddle上here。

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

Answer 1

这就是你追求的吗？ std::find

以下是用于获得效果的代码。如果你愿意的话，可以使用H1的填充和边距来区分它。

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

$('#load_more').on('click', function() {
    var offset = $('#main-ajax-container').data('offset');
    var prefix = $('#main-ajax-container').data('prefix');
    var blogid = $('#main-ajax-container').data('blogid');
    var fid = $('#main-ajax-container').data('fid');

$.ajax({
  type: "get",
  url: "wp-admin/admin-ajax.php",
  data: {
    action: "home_load_more",
    siteUrl: "<?php echo get_site_url();?>",
    offset: offset,
    prefix: prefix,
    blogid: blogid,
    fid: fid
  },
  success: function(resp) {
      $('#main-ajax-container').append(resp);
      offset = parseInt(offset) + 3;
      $('#main-ajax-container').data('offset', offset);
      var max = $('#main-ajax-container').data('max');
      if (offset >= parseInt(max)) { 
        $('#load_more').addClass('done');
      }
    } 
  });
});

Answer 2

我进行了不同的溃败并使用H1

在padding-top周围创建了一个包装器

https://jsfiddle.net/9ss2g8eL/1/

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

使用背景图像在文本周围创建边框而不影响图像

2 个答案: