在Bootstrap栅格中的图像纹理

时间：2016-11-17 12:43:57

标签： html css twitter-bootstrap css3 twitter-bootstrap-3

我需要在我在bootstrap网格中的图像上重复一个小的.png纹理。我需要这个纹理不要溢出图像＆＃39;边界。我试图将它粘贴到背景上，但它覆盖了所有范围，但我需要它才能拥有img的大小。

＆＃13;
＆＃13; 
/*HEADER*/

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

/*HEADER*/

#logo {
  margin-top: 12px;
}
/*BODY*/

body {
  background-color: #262626;
  padding: 70px 0 70px 0;
}
@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
}
.row > div > a > img {
  width: 100%;
  display: block;
}
.top-buffer {
  margin-top: 25px;
}
/*IMG OVERLAY*/

.img-container {
  background: url('http://feanor.cz/public/img/web/img-cover.png');
}
/*DROPDOWN*/

ul.nav li.dropdown:hover > ul.dropdown-menu {
  display: block;
  background-color: #1e1e1e;
}
.navbar-nav > li > .dropdown-menu > li > a {
  color: #aaa;
}
.navbar-nav > li > .dropdown-menu > li > a:hover {
  color: #fff;
  background-color: #161616;
}
/*IMAGES*/

.masonry-container {
  padding: 0;
}
.item {
  padding: 3px;
}
.item img {
  max-width: 100%;
}
/*CONTACTS*/

.contact_photo img {
  max-width: 100%;
}
.contact {
  color: #aaa;
}
.contact a {
  color: #aaa;
}
.contact a:hover {
  color: #fff;
}
.contact img {
  margin-top: 3px;
  margin-bottom: 10px;
}
.contact p {
  font-size: 12pt;
}
/*FOOTER*/

#footer-bottom {
  min-height: 30px;
  line-height: 30px;
  width: 100%;
  color: #777;
}
#footer-bottom > li > i {
  margin-left: -5px;
}
.copyright {
  padding-top: 15px;
}
#email_footer {
  padding-top: 15px;
}
＆＃13; 
<body>

  <nav class="navbar navbar-inverse navbar-fixed-top container-fluid">
    <div class="container">
      <a href="http://feanor.cz/">
        <img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" width="200" alt="Feanor Studio">
      </a>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/painting/oil/8t.jpg">
        </a>
      </div>
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/photo/portrait/32t.jpg">
        </a>
      </div>
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/photo/wedding/26t.jpg">
        </a>
      </div>
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/photo/car/5t.jpg">
        </a>
      </div>
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/photo/product/10t.jpg">
        </a>
      </div>
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/photo/interior/4t.jpg">
        </a>
      </div>
    </div>

    <div class="footer-bottom navbar-inverse navbar-fixed-bottom container-fluid">
      <div class="container">
        <div class="copyright navbar-left">
          © 2016, Feanor, All rights reserved
        </div>
        <ul class="nav navbar-nav navbar-right navbar-right">
          <li>
            <a target="_blank" href="#">
              <i class="fa fa-instagram fa-2x faicon"></i>
            </a>
          </li>
          <li>
            <a target="_blank" href="#">
              <i class="fa fa-envelope fa-2x faicon"></i>
            </a>
          </li>
          <li>
            <p>lybvit@gmail.com</p>
          </li>
        </ul>
      </div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

您可以使用伪元素来容纳图像叠加层，只需对CSS进行一些更改：

.img-container a {
  display: block;
  position: relative;
}
.img-container a:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('http://feanor.cz/public/img/web/img-cover.png');
}

示例（查看整页）：

＆＃13;
＆＃13; 
/*HEADER*/

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

/*HEADER*/

#logo {
  margin-top: 12px;
}
/*BODY*/

body {
  background-color: #262626;
  padding: 70px 0 70px 0;
}
@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
}
.row > div > a > img {
  width: 100%;
  display: block;
}
.top-buffer {
  margin-top: 25px;
}
/*IMG OVERLAY*/

.img-container a {
  display: block;
  position: relative;
}
.img-container a:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('http://feanor.cz/public/img/web/img-cover.png');
}
/*DROPDOWN*/

ul.nav li.dropdown:hover > ul.dropdown-menu {
  display: block;
  background-color: #1e1e1e;
}
.navbar-nav > li > .dropdown-menu > li > a {
  color: #aaa;
}
.navbar-nav > li > .dropdown-menu > li > a:hover {
  color: #fff;
  background-color: #161616;
}
/*IMAGES*/

.masonry-container {
  padding: 0;
}
.item {
  padding: 3px;
}
.item img {
  max-width: 100%;
}
/*CONTACTS*/

.contact_photo img {
  max-width: 100%;
}
.contact {
  color: #aaa;
}
.contact a {
  color: #aaa;
}
.contact a:hover {
  color: #fff;
}
.contact img {
  margin-top: 3px;
  margin-bottom: 10px;
}
.contact p {
  font-size: 12pt;
}
/*FOOTER*/

#footer-bottom {
  min-height: 30px;
  line-height: 30px;
  width: 100%;
  color: #777;
}
#footer-bottom > li > i {
  margin-left: -5px;
}
.copyright {
  padding-top: 15px;
}
#email_footer {
  padding-top: 15px;
}
＆＃13; 
<body>

  <nav class="navbar navbar-inverse navbar-fixed-top container-fluid">
    <div class="container">
      <a href="http://feanor.cz/">
        <img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" width="200" alt="Feanor Studio">
      </a>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/painting/oil/8t.jpg">
        </a>
      </div>
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/photo/portrait/32t.jpg">
        </a>
      </div>
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/photo/wedding/26t.jpg">
        </a>
      </div>
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/photo/car/5t.jpg">
        </a>
      </div>
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/photo/product/10t.jpg">
        </a>
      </div>
      <div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
        <a href="#">
          <img src="http://feanor.cz/public/img/photo/interior/4t.jpg">
        </a>
      </div>
    </div>

    <div class="footer-bottom navbar-inverse navbar-fixed-bottom container-fluid">
      <div class="container">
        <div class="copyright navbar-left">
          © 2016, Feanor, All rights reserved
        </div>
        <ul class="nav navbar-nav navbar-right navbar-right">
          <li>
            <a target="_blank" href="#">
              <i class="fa fa-instagram fa-2x faicon"></i>
            </a>
          </li>
          <li>
            <a target="_blank" href="#">
              <i class="fa fa-envelope fa-2x faicon"></i>
            </a>
          </li>
          <li>
            <p>lybvit@gmail.com</p>
          </li>
        </ul>
      </div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题