Question

目前正在完成我的网站，我遇到的一个问题是在我的每个轮播元素上都有透明的叠加层。我想要一个透明的灰色覆盖层来覆盖元素，因此颜色方案保持齐平。

我在实际div上尝试了很多设置，但似乎没有什么可以直接应用于元素来进行叠加。在每个轮播元素上进行叠加的最明智的方法是什么？

当前屏幕 - http://i988.photobucket.com/albums/af6/jtbitt/portfolio-screen_zpsas84np5e.png

HTML -

".*\/(.*)\?ref"

CSS -

/product/sam/go-with-me?ref=popular

Answer 1

这是您应用过滤器的代码。你可以玩颜色和不透明度。

＆＃13;

#portfolio {
  height: 100%;
  width: 100%;
  color: gray;
  background-color: #101010;
  border-bottom: 3px solid black;
}
#portfolio .container-fluid,
#portfolio .row {
  height: 100%;
}
.portfolio-left {
  height: 100%;
  background-image: url('../../images/jay-photograph.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-right: 3px solid #101010;
}
.portfolio-right {
  text-align: center;
  padding-top: 16.5vh;
}
.portfolio-content {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.portfolio-title h1 {
  font-size: 3.1vw;
  margin-bottom: 1.3vh;
}
.portfolio-filters-container {
  text-align: center;
  padding-bottom: 10px;
}
.portfolio-filters {
  width: auto;
  color: gray;
  border: 1px solid gray;
  border-radius: 5px;
  background-color: black;
  margin: 5px;
  font-size: 0.7vw;
}
.portfolio-projects {
  border-style: solid;
  border-color: gray;
  height: 100%;
  width: 100%;
}
.portfolio-projects img {
  max-height: 100%;
  max-width: 100%;
  background-color: rgba(82, 82, 82, 0.6);
}
.portfolio-button {
  padding-top: 1.3vh;
}
.portfolio-button button {
  font-size: 0.7vw;
  border: 1px solid gray;
  background-color: #101010;
  color: gray;
}
.filter {
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.6;
}
@media only screen and (max-width: 992px) {
  .portfolio-left {
    height: 50%;
    border-bottom: 3px solid black;
  }
}

＆＃13;

<section id="portfolio" ng-controller="portfolioController">
  <div class="container-fluid">

    <div class="row portfolio-row">
      <div class="filter">
        <div class="portfolio-left col-xs-12 col-md-6">
        </div>

        <div class="portfolio-right col-xs-12 col-md-6">
          <div class="portfolio-content">
            <div class="portfolio-title">
              <h1><strong>DONE SOME STUFF.</strong></h1>
            </div>

            <div class="portfolio-filters-container">
              <button class="portfolio-filters" ng-repeat="language in portfolio.languages" ng-click="portfolio.projectSort(language)">{{ language.name }}</button>
            </div>

            <div class="portfolio-carousel">
              <carousel interval="portfolio.carouselInterval" no-wrap="noWrapSlides">
                <slide ng-repeat="project in portfolio.projectsToShow">
                  <div class="portfolio-projects">
                    <img ng-src="{{ project.image }}" />
                  </div>
                </slide>
              </carousel>
            </div>

            <div class="portfolio-button">
              <button class="label label-success">CONTACT ME =></button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

＆＃13;

Answer 2

您可以使用伪元素来覆盖图像：

<强> Working Example

.portfolio-projects {
  border-style: solid;
  border-color: gray;
  height: 100%;
  width: 100%;
  position: relative;
}
.portfolio-projects img {
  max-height: 100%;
  max-width: 100%;
  background-color: rgba(82, 82, 82, 0.6);
}
.portfolio-projects::before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(82, 82, 82, 0.6);
}

#portfolio {
  height: 100%;
  width: 100%;
  color: gray;
  background-color: #101010;
  border-bottom: 3px solid black;
}
#portfolio .container-fluid,
#portfolio .row {
  height: 100%;
}
.portfolio-left {
  height: 100%;
  background-image: url('../../images/jay-photograph.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-right: 3px solid #101010;
}
.portfolio-right {
  text-align: center;
  padding-top: 16.5vh;
}
.portfolio-content {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.portfolio-title h1 {
  font-size: 3.1vw;
  margin-bottom: 1.3vh;
}
.portfolio-filters-container {
  text-align: center;
  padding-bottom: 10px;
}
.portfolio-filters {
  width: auto;
  color: gray;
  border: 1px solid gray;
  border-radius: 5px;
  background-color: black;
  margin: 5px;
  font-size: 0.7vw;
}
.portfolio-projects {
  border-style: solid;
  border-color: gray;
  height: 100%;
  width: 100%;
  position: relative;
}
.portfolio-projects img {
  max-height: 100%;
  max-width: 100%;
  background-color: rgba(82, 82, 82, 0.6);
}
.portfolio-projects::before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(82, 82, 82, 0.6);
}
.portfolio-button {
  padding-top: 1.3vh;
}
.portfolio-button button {
  font-size: 0.7vw;
  border: 1px solid gray;
  background-color: #101010;
  color: gray;
}
@media only screen and (max-width: 992px) {
  .portfolio-left {
    height: 50%;
    border-bottom: 3px solid black;
  }
}

<section id="portfolio" ng-controller="portfolioController">
  <div class="container-fluid">
    <div class="row portfolio-row">
      <div class="portfolio-left col-xs-12 col-md-6"></div>
      <div class="portfolio-right col-xs-12 col-md-6">
        <div class="portfolio-content">
          <div class="portfolio-title">
            <h1><strong>DONE SOME STUFF.</strong></h1>

          </div>
          <div class="portfolio-filters-container">
            <button class="portfolio-filters" ng-repeat="language in portfolio.languages" ng-click="portfolio.projectSort(language)">{{ language.name }}</button>
          </div>
          <div class="portfolio-carousel">
            <carousel interval="portfolio.carouselInterval" no-wrap="noWrapSlides">
              <slide ng-repeat="project in portfolio.projectsToShow">
                <div class="portfolio-projects">
                  <img src="https://i.stack.imgur.com/vNQ2g.png" />
                </div>
              </slide>
            </carousel>
          </div>
          <div class="portfolio-button">
            <button class="label label-success">CONTACT ME =></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

在这个div上放置叠加层最聪明的方法是什么？

2 个答案: