Question

我正在尝试使用bootstrap最新版本在给定页面的背景中将特色图像显示到我的WordPress网站中。我创造了几个＆＃34;盒子＆＃34;覆盖不同的渐变/不透明度层以提高可读性，但我无法弄清楚如何使一切工作。

现在的样子：

enter image description here

我想在给定高度裁剪图像，而不会使图像变形。

HTML 代码为：

    <header id="masthead" class="site-header" role="banner">

    <!-- IMAGEN FONDO ARTISTAS -->
    <div class="artistas-bg">
        <img width="4495" height="2708" src="http://localhost:8080/wlr/wp-content/uploads/2015/07/Los-Bengala.jpg" class="img-responsive wp-post-image" alt="Los Bengala">  </div>
    <div class="artistas-bg-op">
        <div class="container">
            <header class="entry-header">
                <h1 class="titulo-artistas">Los Bengala</h1>            </header><!-- .entry-header -->
        </div>
  </div>

  <!-- CABECERA ARTISTAS -->
  <div class="navartistas-bg"></div>
  <nav class="navbar navartistas">
       <div class="container">
        <div class="row">
            <div class="navbar-header">
            <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
              <a class="logo-artistas" href="http://localhost:8080/wlr/" rel="home">WildLion Records</a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
                          <div class="menu-menu-principal-container"><ul class="nav navbar-nav"><li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://localhost:8080/wlr/">Inicio</a></li>
<li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="/artistas/">Artistas</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost:8080/wlr/tienda/">Tienda</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://localhost:8080/wlr/videos/">Videos</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://localhost:8080/wlr/tour/">Tour</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost:8080/wlr/contacto/">Contacto</a></li>
</ul></div>               <div class="idiomas pull-right">
                      <button type="button" class="btn btn-default btn-xs navbar-btn id">ES</button>
                      <button type="button" class="btn btn-default btn-xs navbar-btn id">EN</button>
                  </div>
            </div><!--/.nav-collapse -->
          </div>
      </div>
    </nav>
</header>

CSS 代码为：

.artistas-bg {
    max-height: 674px;
}

.artistas-bg img {

    z-index: 10;
    position: relative;
    background: no-repeat top center;
    top: 0;
}

.artistas-bg-op {
    height: 674px;
    width: 100%;
    z-index: 10;
    position: absolute;
    top: 0;
    z-index: 15;
    background:transparent;
        background: linear-gradient(top, rgba( 255, 255, 255, 255 ) 75%, rgba( 0, 0, 0, 1 ) 100% );
        background: -moz-linear-gradient(top, rgba( 255, 255, 255, 0) 75%, rgba( 0, 0, 0, 1 ) 100% );
        background: -ms-linear-gradient(top, rgba( 255, 255, 255, 0 ) 75%, rgba( 0, 0, 0, 1 ) 100% );
        background: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 75%, rgba( 0, 0, 0, 1 ) 1005% );
        background: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 75%, rgba( 0, 0, 0, 1 ) 100% );
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
}

.titulo-artistas {
    bottom: 10px;
    color: #fff;
    font-family: "Raleway",sans-serif;
    font-size: 60px;
    font-weight: 800;
    position: absolute;
}

.navartistas-bg {
  background: #000;
  filter: alpha(opacity=60);
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=60);
  -moz-opacity: 0.60;
  opacity: 0.6;
  zoom: 1;
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
}

.navartistas {
  background: transparent;
  height: 96px;
  zoom: 1;
  z-index: 25;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
}

.logo-artistas {
    float: left;
    height: 54px;
    margin-right: 15px;
    margin-top: 24px;
    padding: 0;
    text-indent: -9999px;
    width: 115px;
    background: url("../images/dark-logo-2.png") no-repeat top left;
}

.navbar, .navartistas {
  border-radius: 0px !important;
}

.navartistas ul.nav.navbar-nav {
    font-family: 'Raleway', sans-serif;
    color: #FFF;
    margin-top: 45px;
}

.navartistas ul.nav.navbar-nav li a {
    color: #FFF;
}

.navartistas ul.nav.navbar-nav li.current-menu-item a {
    color: #FFF;
    font-weight: 700;
    text-decoration: underline;
}

.navartistas ul.nav.navbar-nav li a:hover {
    background: none !important;
    font-weight: 700;
    text-decoration: underline;
}

.idiomas {
    margin-top: 42px;
}

.id {
    border-radius: 0;
    padding: 0px 6px;
}


.navartistas .in {
    border-top: none;
    box-shadow: none;
    background-color: #000;
      filter: alpha(opacity=60);
      filter: progid: DXImageTransform.Microsoft.Alpha(opacity=60);
      -moz-opacity: 0.60;
      opacity: 0.6;
      zoom: 1;
}

Twitter bootstrap响应式背景图片+导航+标题+ wordpress

0 个答案: