Question

我有一个包含在div中的滑块。每个元素都放在这个div中，图像被设置为div的背景。在左边我有一个图像，在右边我有一个标题和文本以及一个号召性用语按钮。

我希望图片立即留在文本中。如果我将文本的宽度设置为较小的值，则在移动设备上查看页面时，图像将使文本不可读。 HTML＆amp;中的哪些实现.css你认为这是最好/最简单的方法吗？

＆＃13;

.slide-email-thread {
    background: url("http://4.imimg.com/data4/YP/FD/MY-13642581/hp-laptop-500x500.jpg") no-repeat bottom left;
    background-size: contain;
    height: 500px;
    width: 120%;
    bottom: 8px;
    left: 16px;
}
.email-thread-header{
  font-family: Arial,Helvetica,sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 40px;
  width: 95%;
  margin: 0;
  color: #FFFFFF;
  font-weight: bold;
  text-transform: uppercase;

}
.email-thread-text {
  color:#FFFFFF;
  font-size: 15px;
  margin: 0 auto 30px;
  width: 100%;
}
.email-thread-btn-link {
  width: 50%;
}
.email-thread-button {
  
}
.email-thread-btn {
    border: 2px solid #FFFFFF !important;
    border-radius: 3px;
    background-color: transparent !important;
    text-decoration: none;
    transition: background-color 0.5s ease, color 0.5s ease, border 0.5s ease;
    font-size: 1.2em;
    color: #FFFFFF !important;
    padding: 1% 1%;
    display: inline-block;
    margin: 0 auto;
    width: 30%;
}
.email-thread-btn:hover{
    text-decoration: none;
    color:#F8981D !important;
    transition: background-color 0.5s ease, color 0.5s ease, border 0.5s ease;
    background-color: #FFFFFF !important;
}
.slide-content {
  margin:0px auto; 
  width:100%;
  line-height:1.1
  margin-top: -30px;
  font-weight:400; 
  margin-bottom:30px; 
  width:75%;
  text-align:left;
  padding:20px;
}

＆＃13;

<div class="gradient-bg-email-thread slide">
<div class="slide-email-thread">
<div class="slide-content">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQhhrwa3eP_qIPbSl9jCJe1JrAN7ahuI0IozBVF89fLJH0X7izl" style="padding-top: 20px;"/>
<div class="email-thread-header">Introducing My Site</div>
<div class="email-thread-text">My text is here & it is overlappng.</div>
<div class="email-thread-link"><a class="home_slide-banner email-thread-btn" href="example.com" target="_blank">CHECK IT OUT</a></div>
</div>
</div>
</div>

＆＃13;

滑块必须是div，将图像简单地放在div中是否更好，而不是将其作为div滑块中的背景？

为了让它在移动设备上显示正常，是否最好为图像添加不透明度以使文字可读？不确定在这里做什么更容易。

JS小提琴示例：https://jsfiddle.net/b63xwb0z/

Answer 1

我会建议一些响应式样式。将您希望放置的所有元素放置在包含div中的图像侧面，并在css中使用媒体查询来重新放置图像和内容部分。此外，尽可能避免使用内联样式，以避免将来出现令人头疼的问题。

在幻灯片中尝试类似的内容

HTML

<div class="slide-image">
    <img src="logo-image.png"/>
</div>

<div class="slide-content">
    <div class="slider-header">
        Introducing My Site
    </div>

    <div class="slider-text">
        Welcome to the hmpg slider with content in it.
    </div>

    <div class="button-link">
        <a class="slider-button-cta" href="example.com" target="_blank">LEARN MORE</a>
    </div>
</div>

CSS

.slide-image,
.slide-content
{
    display: inline-block;
    width: 100%;
}

.slide-image img
{
    padding-top: 20px;
}

@media screen and (min-width: 600px) /* I picked 600px arbitrarily */
{
    .slide-image
    {
        width: 14em; /* I picked 14em arbitrarily */
    }

    .slide-content
    {
        width: calc(100% - 14em);
    }
}

您可以开始阅读有关响应式网页设计here。

Answer 2

我坚持你不要把图像作为背景特别是当你在左边显示图像并在右边显示标题时，因为你需要更多的图像预防措施不在文本下面。

最好/最简单的方法是在html中使用<img src="" />标记。

以下是带PC的代码，iphone 6的移动视图加[max-device-width：414px]和iphone 6 [max-device-width：375px]：

HTML：

<div class="gradient-bg slide">
        <div class="slide-hmpg">
            <img src="current-ac-banner.jpg" alt="slide image" class="slide-image" /> <!--ADD YOUR IMAGE HERE -->
            <div class="slide-containing-content">
                <div class="slider-header">Introducing My Site</div>
                <div class="slider-text">Welcome to the hmpg slider with content in it.</div>
                <div class="button-link"><a class="slider-button-cta" href="" target="_blank">LEARN MORE</a>
                </div>
            </div>
        </div>
    </div>

CSS

img.slide-image{ /*Added This class for image*/
        width:400px;
        height:auto;
        float:left;
        margin-right:20px;
    }

    .gradient-bg { /* gradient bg inside of slider, truncated */
        background: #F8981D; /* Old browsers */
        background: -moz-linear-gradient(top,  #F8981D 0%, #B1792A 45%);
        width:100%;
        height:660px;
    }

    .slider-header{ /* Overlap issue */
      font-family: "Arial,Helvetica,sans-serif;
      padding-top: 20px;
      padding-bottom: 20px;
      font-size: 40px;
      width: 95%;
      margin: 0;    
    }
    .slider-text {  /* Overlap issue */
      font-size: 15px;
      margin: 0 auto 30px;
      width: 100%;
    }


    .button-link {
      width: 50%;
      float:left; /*Added This*/
    }


    .slider-button-cta { /* overlap issue on mobile */
        border: 2px solid #000000 !important;
        border-radius: 3px;
        background-color: transparent !important;
        text-decoration: none;
        font-size: 1.2em;
        padding: 1% 1%;
        display: inline-block;
        margin: 0 auto;
        width: 30%;
    }


    /*FOR IPHONE 6 PLUS */
    @media screen and (max-device-width: 414px) and (orientation: portrait){
        img.slide-image{ /*Added This class for image*/
            width:100%;
            height:auto;
            float:center;
        }

        .button-link {
            width:100%;
            margin-left:10px;
        }

        .slider-header, .slider-text{
            margin-left:10px;
        }
    }

    /*FOR IPHONE 6 */
    @media screen and (max-device-width: 375px) and (orientation: portrait){
        .button-link {
            width:420px;
            margin-left:10px;
        }
    }

防止图像＆amp;来自重叠的文字

2 个答案: