边框图像无法识别部分内容

时间:2018-09-06 09:52:10

标签: html css

这是我上一个问题的参考: How to call a script inside a script

问题:边框图像未覆盖全部内容: sample content

这是我目前正在处理的代码。 CODEPEN注意:,我同时在代码笔中合并了2个CSS文件,因为我俩都需要。我需要边框来覆盖该区域。并且必须根据内容长度自动调整。据推测,类似于this

下面是摘要代码:

.content2 {
  margin: auto 0;
  border: 10px solid transparent;
  padding: 15px;
  -webkit-border-image: url('https://image.ibb.co/f7kxxz/border.png') 30 stretch;
  /* Safari 3.1-5 */
  -o-border-image: url('https://image.ibb.co/f7kxxz/border.png') 30 stretch;
  /* Opera 11-12.1 */
  border-image: url('https://image.ibb.co/f7kxxz/border.png') 30 stretch;
}
<div id='pages'>
  <div class='mydivshow div1' style='display: block;'>
    <section class='content2'>
      <h1> A </h1>
      <p> A is for Atkinson, first name James, an enterprising gentleman from the wildest reaches of northern England, who, on a fine morning in the early spring of 1799, set forth, with a large brown bear.</p>
    </section>
  </div>

有人可以帮我弄清楚为什么.content部分没有覆盖h1和p吗?

1 个答案:

答案 0 :(得分:0)

我能够解决自己的问题。这就是我所做的:

我能够找到我的代码影响徽标和社交的区域。当我尝试按照建议将!important放置时,什么都没有改变。所以我改为使用内部样式,并将其添加到标头标签

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sabreen's Seafood Market &amp; Restaurant</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >

    <link href="css/jquery.bxslider.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>

  <style type="text/css">
    .fa {
      width: 30px !important;
      height: 30px !important;
    }
    .logo img {
    max-height: 200px !important;
  }
  </style>
</head>