将div溢出淡入相邻的div

时间：2017-06-12 02:10:01

标签： html css user-interface responsive-design

我正在尝试在https://codepen.io/sarimabbas/pen/qjZYvr

创建卡片用户界面 
.book_left {
  width: 35%;
  height: 300px;
  float: left;
  overflow-x: hidden;
  background: transparent;
}
.book_left img {
  width: auto;
  height: 100%;
  border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
  position: relative;
}
.book_right {
  width: 65%;
  height: 300px;
  float: left;
  background: #000000;
  border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
}

我遇到的问题是卡的左侧（包含图像）可以溢出到右侧。我想将它混合到右边的div中，而不是隐藏这个溢出，这样文本就不会被隐藏并且可以读取。

这样的事情会成为可能吗？我试图研究花车，背景图像淡入淡出和div的组合但是没有成功。

在相关的说明中，使这种卡响应所需的步骤是什么？

2 个答案:

答案 0 :(得分：0)

我不确定我完全理解，但使用下面的代码可以提供透明度，可以在溢出的图像上看到文字。完全黑色的背景不是一种选择。

.book_right {
  width: 65%;
  height: 300px;
  float: left;
  background: rgba(0,0,0, 0.5);
  border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
  position: relative;
}

关于响应性，我会选择flexbox而不是浮点数，而是使用百分比代替宽度和高度的像素。

＆＃13;
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.book {
  width: 450px;
  height: 300px;
  background: transparent;
  position: static;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0 2px 1px 0 #777;
}
.book_left {
  width: 35%;
  height: 300px;
  float: left;
  overflow-x: visible;
  background: transparent;
}
.book_left img {
  width: auto;
  height: 100%;
  border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
  position: relative;
}
.book_right {
  width: 65%;
  height: 300px;
  float: left;
  background: rgba(0,0,0, 0.5);
  border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
  position: relative;
}
.book_right h1 {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  text-align: left;
  font-size: 20px;
  margin: 30px 0 0 0;
  padding: 0 0 0 40px;
  letter-spacing: 1px;
}
.book_right_details ul {
  list-style-type: none;
  padding: 0 0 0 40px;
  margin: 10px 0 0 0;
}
.book_right_details ul li {
  display: inline;
  color: #e3e3e3;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 0 40px 0 0;
}
.book_right_blurb p {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  padding: 0 40px 0 40px;
  letter-spacing: 1px;
  margin: 10px 0 10px 0;
  line-height: 20px;
}
.book_right_blurb a {
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  padding: 0 0 0 40px;
  color: #2ecc71;
  margin: 0;
}
.book_right_button {
  padding: 0 0 0 40px;
  margin: 15px 0 0 0;
}
.book_right_button a {
  color: #2ecc71;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  border: 2px solid #2ecc71;
  padding: 5px 5px 5px 5px;
  font-size: 12px;
  border-radius: 5px;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}
.book_right_button a:hover {
  color: #000000;
  background-color: #2ecc71;
  cursor: pointer;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}
＆＃13; 
  <div class='book'>
        <div class='book_left'>
          <img src='http://images.gr-assets.com/books/1474171184l/136251.jpg'>
        </div>
        <div class='book_right'>
          <h1>Harry Potter and the Deathly Hallows</h1>
          <div class='book_right_details'>
            <ul>
              <li>JK Rowling</li>
              <li>Fiction</li>
            </ul>
            <div class='book_right_blurb'>
              <p>Harry meets his destiny in the final book of Rowling's acclaimed series.</p>
            </div>
            <div class='book_right_button'>
            <a href='https://www.youtube.com/watch?v=ot6C1ZKyiME' target='_blank'>READ BOOK</a>
            </div>
          </div>
        </div>
      </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

有一些解决这个问题的方法，但我能想到的最简单的方法就是在右侧框中应用渐变背景并将.book的背景设置为黑色。所以类似下面的东西（当然需要一些抛光）

＆＃13;
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.book {
  width: 450px;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0 2px 1px 0 #777;
  background: #000;
}
.book_left {
  width: 35%;
  height: 300px;
  float: left;
  }
.book_left img {
  width: auto;
  height: 100%;
  border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
  /* No need for relative or z-indexes if our layers are in order (later in markup = "higher" layer for position: static) */
}
.book_right {
  width: 65%;
  height: 300px;
  float: left;
  border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
  /* Gradient that sits on left of right panel - black background has also been applied to .book so that if the image doesn't fit the width we won't end up with weird chunks of missing background */
  /* Generated gradient via: http://colorzilla.com/gradient-editor/ then tweaked a little */
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10px,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10px,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
.book_right h1 {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  text-align: left;
  font-size: 20px;
  margin: 30px 0 0 0;
  padding: 0 0 0 40px;
  letter-spacing: 1px;
}
.book_right_details ul {
  list-style-type: none;
  padding: 0 0 0 40px;
  margin: 10px 0 0 0;
}
.book_right_details ul li {
  display: inline;
  color: #e3e3e3;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 0 40px 0 0;
}
.book_right_blurb p {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  padding: 0 40px 0 40px;
  letter-spacing: 1px;
  margin: 10px 0 10px 0;
  line-height: 20px;
}
.book_right_blurb a {
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  padding: 0 0 0 40px;
  color: #2ecc71;
  margin: 0;
}
.book_right_button {
  padding: 0 0 0 40px;
  margin: 15px 0 0 0;
}
.book_right_button a {
  color: #2ecc71;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  border: 2px solid #2ecc71;
  padding: 5px 5px 5px 5px;
  font-size: 12px;
  border-radius: 5px;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}
.book_right_button a:hover {
  color: #000000;
  background-color: #2ecc71;
  cursor: pointer;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}
＆＃13; 
<div class='book'>
        <div class='book_left'>
          <img src='http://images.gr-assets.com/books/1474171184l/136251.jpg'>
        </div>
        <div class='book_right'>
          <h1>Harry Potter and the Deathly Hallows</h1>
          <div class='book_right_details'>
            <ul>
              <li>JK Rowling</li>
              <li>Fiction</li>
            </ul>
            <div class='book_right_blurb'>
              <p>Harry meets his destiny in the final book of Rowling's acclaimed series.</p>
            </div>
            <div class='book_right_button'>
            <a href='https://www.youtube.com/watch?v=ot6C1ZKyiME' target='_blank'>READ BOOK</a>
            </div>
          </div>
        </div>
      </div>
＆＃13;
＆＃13;
＆＃13;

使其响应您可以在.book上设置％宽度并可能浮动它。 我的方法的一个警告是，如果图像没有溢出，它将有一个硬边缘，所以它可能看起来很奇怪旁边没有溢出。您也可以通过在图像上设置百分比宽度来攻击这一点，但是您需要对比例大不相同的图像保持谨慎，并确保它们始终覆盖300px高度。或者，您可以将图片设置为.book_left上的背景图片并设置background-size: cover

我通常建议在这种情况下将图像裁剪成一致的比例，以避免褪色溢出，因为从长远来看，它会让你的生活更轻松。

可能更加一致的淡入淡出的另一种方法是相对位置.book_left然后在其中放置一个绝对定位的div，并在图像顶部分层渐变背景，这样就像div一样.book_left

中添加了以下属性 
position: absolute;
right: 0;
z-index: 1;
width: 10px; 
background: -moz-linear-gradient .....

如果你想要褪色那么这与填充容器的图像相结合可以给你一个更一致的外观

相关问题
最新问题