Question

我已经找了一段时间，但找不到让我的文字保持原样的方法。我需要的只是文本正常！我是这个网站的新手和HTML，所以如果我马虎，那么我道歉

HTML：

        <div class="col-md-4">
            <div class="col" id="one">Programming</div>
        </div>
    </div>
</div>

CSS

 html {
    box-sizing: border-box;
}
body {
    font-family: monospace;
    padding: 0;
    margin: 0;
    background: black;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
.grid {
    width: 100%;
    margin: 0 auto;
}
.grid:before,
.grid:after,
.row:before,
.row:after {
    content: " ";
    display: table;
}
.grid:after,
.row:after {clear: both;}
[class*='col-']{
    width: 100%;
    float: left;
    min-height: 1px;
}
.col {
    padding: 1em;
    margin: 1px;
    box-shadow: 0 1px 1px rgba(0,0,0,.3);
    min-height: 200px;
    height: inherit;

}

#one,#two,#three,#four,#five,#six {
    font-size: 18px;
    font-weight: bold;
    color: yellow;
    text-shadow: 2px 2px 8px black;
    display:flex;
    justify-content:center;
    align-items:center;
}

.col:hover {
    -webkit-filter: brightness(50%);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
}

@media screen and (min-width:1024px){
    .col-md-4 {width: 33.33333%; height: 473.5px;}
}

#one {
    background-image: url("http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg");
}

查看jsfiddle

非常感谢！

Answer 1

使用现有标记，您可以转换伪元素，使用纯色背景并将不透明度从0（隐藏）切换为.5（50％），或者仅使用rgba(0,0,0,0.5)并切换不透明度0到1.然后给跨度一个z-index，使其显示在顶部。

html {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  padding: 0;
  margin: 0;
  background: black;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.grid {
  width: 100%;
  margin: 0 auto;
}

.grid:before,
.grid:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}

.grid:after,
.row:after {
  clear: both;
}

[class*='col-'] {
  width: 100%;
  float: left;
  min-height: 1px;
}

.col {
  padding: 1em;
  margin: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  min-height: 200px;
  height: inherit;
}

#one,
#two,
#three,
#four,
#five,
#six {
  font-size: 18px;
  font-weight: bold;
  color: yellow;
  text-shadow: 2px 2px 8px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.col:after {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  opacity: 0;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

.col:hover:after {
  opacity: 1;
}

.col span {
  position: relative;
  z-index: 1;
}

@media screen and (min-width:1024px) {
  .col-md-4 {
    width: 33.33333%;
    height: 473.5px;
  }
}

#one {
  background-image: url("http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg");
}

<div class="grid">
  <div class="row">
    <div class="col-md-4">
      <div class="col" id="one"><span>Programming</span></div>
    </div>
  </div>
</div>

在悬停但不是文本时使背景变暗

1 个答案: