Change color of text responding to background color

前端 未结 2 1914
日久生厌
日久生厌 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;
    }
    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.

提交回复
热议问题