【问题标题】:Change CSS for image in data-bg更改 data-bg 中图像的 CSS
【发布时间】:2016-06-27 15:50:14
【问题描述】:

<div class="item" data-bg="images/demo-images/team_bg_1.jpg">

我想将data-bg 属性中使用的图像定位到右下角。如何为 data-bg 属性应用 CSS。

image的实际大小是900pxdiv的实际大小是100%

请帮助将图像放在右下角。

【问题讨论】:

    标签: html css properties attributes


    【解决方案1】:

    为了将背景图片定位到右下角,请使用以下 css:

    background-position: right bottom;
    

    请注意,您不能在纯 css 中使用来自 data-bg 属性的图像 url。欲了解更多信息,请参阅this link

    【讨论】:

      【解决方案2】:

      您不能使用 CSS“定位”“属性”。我猜你打算将data-bg 中的图像作为.item div 的背景。

      首先您需要将data-bg 更改为style 以使图像显示为正确的CSS 背景图像,如下所示:

      style="background-image: url(images/demo-images/team_bg_1.jpg")"
      

      之后,您可以使用 CSS 规则来定位背景并应用您想要的任何样式:

      .item {
        background-repeat: no-repeat;
        background-position: right bottom;
        height: 300px;
        border: 1px solid red;
      }
      <div class="item" 
           style="background-image: url(https://placehold.it/900x200)">
      </div>

      jsFiddle 演示:https://jsfiddle.net/

      我不确定你为什么要使用data-bg,你有处理这个数据属性的 JavaScript 代码吗?你的问题不够清楚。

      【讨论】:

      • 好答案。但是,在未来我们能够使用元素的属性作为 CSS 中的背景图像。看到这个:stackoverflow.com/questions/15734546/…
      • @powerbuoy 我知道。我给出了一个适用于当前标准的实用解决方案。直到attr()表达式被完全支持,才会辉煌。
      【解决方案3】:

      /*==============================
      	BG BACKGROUND DATA BG
      ==============================*/
      $('.bg-background-area').each(function() {
        "use strict";
        if ($(this).attr("data-bg")) {
          $(this).css({
            'background': 'url(' + $(this).data('bg') + ')',
            'background-position': 'center center',
            'background-repeat': 'no-repeat',
            'background-size': 'cover',
            'background-attachment': 'scroll'
          });
        }
      });
      .bg-background-area {
        position: relative;
        margin: 40px 0;
        padding: 50px;
        min-height: 400px;
      }
      
      .bg-background-area:after {
        background-color: rgba(10, 0, 0, 0.8);
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
      }
      
      .bg-background-area p {
        color: #fff!important;
      }
      
      .bg-background-area h2 {
        color: #fff!important;
      }
      
      .bg-background-area h3 {
        color: #fff!important;
      }
      
      .bg-background-area .container {
        z-index: 1;
        position: relative;
      }
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      
      <section class="bg-background-area" data-bg="https://cdn.pixabay.com/photo/2018/05/12/00/32/coffee-3392168_960_720.jpg">
        <div class="container">
          <p>Test text ....... </p>
        </div>
      </section>

      【讨论】:

        猜你喜欢
        • 2012-07-20
        • 2014-10-20
        • 1970-01-01
        • 1970-01-01
        • 2012-05-18
        • 2018-11-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多