Change color of text responding to background color

前端 未结 2 1912
日久生厌
日久生厌 2020-12-07 02:35

Consider this example: codepen

相关标签:
2条回答
  • 2020-12-07 02:56

    Another solution could be to make your image darker.

    .infobox {
      width: 110mm;
      height: 65mm;
      background-image:url(https://i.pinimg.com/564x/86/70/f2/8670f2ab34bf4082bf3cef004aae0826.jpg);
      background-size: cover;
      position: relative;
    }
    
    .infobox:before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      background: rgba(0, 0, 0, 0.4);
    }
    
    .text {
      position: absolute; bottom: 0; 
      text-align: center; color: white;
    }
    <div class="infobox">
      <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel quam in enim pulvinar fringilla. Etiam molestie convallis pharetra. Sed et tortor tortor. Vestibulum ligula ex, rhoncus semper metus ut, hendrerit porttitor risus. Quisque at porta magna. Phasellus vel vulputate diam. Maecenas sem est, aliquet nec odio euismod, posuere luctus nisl. Vestibulum posuere iaculis massa, sed cursus dui pellentesque sed.</span>
    </div>

    0 讨论(0)
  • 2020-12-07 02:59

    You may simply add a text-shadow with a dark color and you will have a better rendring whataver the image you will use:

    .infobox {
        width: 110mm;
        height: 65mm;
        background:
        linear-gradient(to bottom,transparent,#fff),
        url(https://i.pinimg.com/564x/86/70/f2/8670f2ab34bf4082bf3cef004aae0826.jpg);
      background-size: cover;
      position: relative;
    }
    
    .text {
      position: absolute; bottom: 0; 
      text-align: center; color: white;
      text-shadow: -1px 0 1px #000,
                   1px 0 1px #000,
                   1px 1px 1px #000,
                   -1px -1px 1px #000,
                   0 1px 1px #000,
                   0 -1px 1px #000;
    }
    <div class="infobox">
      <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel quam in enim pulvinar fringilla. Etiam molestie convallis pharetra. Sed et tortor tortor. Vestibulum ligula ex, rhoncus semper metus ut, hendrerit porttitor risus. Quisque at porta magna. Phasellus vel vulputate diam. Maecenas sem est, aliquet nec odio euismod, posuere luctus nisl. Vestibulum posuere iaculis massa, sed cursus dui pellentesque sed.</span>
    </div>

    0 讨论(0)
提交回复
热议问题