Question

我在容器中有一些图像有点奇怪。图像没有占据整个容器，并且它们似乎没有正确居中。我将宽度和最大宽度设置为100％。我在下面发布了截图，显示了它目前的样子，以及我想要完成的任务。代码如下。此外，任何人都可以给我任何关于如何实现图像在第二张图片中的滤镜效果的建议吗？非常感谢任何帮助！

目前的样子

我想要实现的目标：

HTML：

<div class="opinion">
  <div class="wrap">
    <div class="atable">
      <?php query_posts(array('post_type' => array('community', 'projects'),'posts_per_page' => 4,'post_parent' => 0, 'post_status' => array('publish'), 'orderby' => 'menu_order date')); ?>
      <?php while (have_posts()) : the_post(); ?>
        <div class="acell">
          <div class="contentbox">
            <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID, 'issues'), 'large_size' );
            $url = $thumb['0']; ?>

            <ul class="slides">
              <li><a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>"><?php the_post_thumbnail('issues'); ?><span><?php the_title(); ?></span></a></li>
            </ul>

          <!-- <a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>"><?php the_post_thumbnail('issues'); ?><h3><?php the_title(); ?></h3></a> -->
          </div>
        </div>
      <?php endwhile; wp_reset_query(); ?>
    </div>
  </div>
</div>

CSS：

.opinion .atable .acell .contentbox {
position: relative;
}

.opinion .atable .acell .contentbox img {
  width: 100%;
  max-width: 100%;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  display: block;
  margin-bottom: 15px;
  position: relative;
}

.opinion .atable .acell .contentbox ul {
  list-style-type: none;
}

.opinion .atable .acell .contentbox ul li a {
  background-repeat: no-repeat;
  color: white;
  display: block;
  height: 200px;
  max-width: 350px;
  width: 350px;
}

.opinion .atable .acell .contentbox ul li a span {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 10px 10px 20px 10px;
  color: #fff;
  z-index: 10;
  display: inline-block;
  font-size: 1.2em;
  text-shadow: 1px 1px 1px #000;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 4px;
}

Answer 1

对于图像大小调整，请尝试：

.slide img {
width:100%;
height:auto;
}

对于滤镜效果尝试类似这样的CSS3（如果你想为每张幻灯片想要不同的效果，你需要为li元素添加不同的类）：

-webkit-filter: grayscale(0.5) hue-rotate(40deg);

Answer 2

要实现图像的叠加效果，您可以使用一些新的CSS3过滤器属性，但浏览器支持将受到限制。还有另一个选项使用：.slide li上的after伪元素和绝对位置，给它一个背景颜色，不透明度降低，如此......

.contentbox {
  position: relative;
}

.contentbox:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  height: 100%;
  width: 100%;
  background-color: #000; // Change this to the colour you want
  opacity: 0.3;
}

.slides li {
  position: relative;
  z-index: 100;
}

我希望这会有所帮助......

无法让图像占用整个容器

2 个答案: