Отзывчивое или Прозрачное фоновое изображение

Question

Я создаю контейнер с фоновым изображением позади. У меня нет проблем на рабочем столе или больших размерах. Однако, когда окно изменяет размер, текст появляется в верхней части изображения, и текст становится нечитаемым. У вас есть решение об этом? Возможно, измените непрозрачность изображения меньшими размерами или полностью удалите фоновое изображение и вместо этого используйте img src? Вот fiddle

<div class=" network container-fluid"> 
<div class="row"> 
    <div class="container"> 
     <div class="col-md-6"></div> 
     <div class="col-md-6"> 
      <h1> Lorem Ipsume</h1> 

      <br> 
      <br> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p> 
     </div> 
     <br> 
    </div> 
</div> 

.network { 
    background: url(http://i.imgur.com/w5BnMSf.png), #f6f8f8; 
    background-repeat: no-repeat; 
    height: 50%; 
    background-attachment: fixed; 
    background-size: contain; 
    width: 100%; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
} 
.network h1 { 
    font-family:'Open Sans', arial, sans-serif; 
    font-weight: 300; 
    font-size: 49.4000015258789px; 
    color: dimgray; 
    padding-top: 40px; 
} 
.network p { 
    font-family:'Open Sans', arial, sans-serif; 
    font-weight: 300; 
    font-size: 19.4000015258789px; 
    color: dimgray; 
    text-align: justify; 
} 

Answer 1

Я изменил свой HTML и CSS немного, и я думаю, что это результат, который вы хотите:

HTML:

<div class=" network container-fluid"> 
     <div class="row"> 
      <div class="container"> 
       <div class="col-xs-6 img pull-left"></div> 
       <div class="col-xs-6 pull-left"> 
        <h1> Lorem Ipsume</h1> 
       <br> 
       <br> 

       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p> 
       </div> 

        <br style="clear:both;" /> 
     </div> 


     </div> 
    </div> 

CSS :

.img { 
    background: url(http://i.imgur.com/w5BnMSf.png); 
    background-repeat: no-repeat; 
    height: 500px; 
    background-size: contain; 
    background-position:50% 50%; 
} 
.network { 
    background-color:#f6f8f8; 
    height: auto; 
    width: 100%; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
} 
.network h1 { 
     font-family: 'Open Sans', arial, sans-serif; 
     font-weight: 300; 
     font-size: 49.4000015258789px; 
     color: dimgray; 
     padding-top: 40px; 
} 
.network p { 
     font-family: 'Open Sans', arial, sans-serif; 
     font-weight: 300; 
     font-size: 19.4000015258789px; 
     color: dimgray; 
     text-align: justify; 
} 

Вот решение в JsFiddle

Надеются, что это помогает :-)

Answer 2

Я использую прозрачный или полупрозрачный DIV, чтобы держать свой текст так, что производит впечатление

1. Вот как: : Прозрачный

-PS: непрозрачность - это ваш звонок, когда он чувствует право

.container{background:rgba(255,255,255,0.6);} 

1. Также вы можете использовать Полупрозрачная размытость

.container{ 
    -webkit-filter: blur(10px); 
    filter: url('blur.svg');/*look below for creating blur.svg*/ 
    filter: blur(10px); 
} 

создают blur.svg // скопировать содержимое в файл и сохранить его как blur.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <filter id="blur"> 
    <feGaussianBlur stdDeviation="10" /> 
    </filter> 
</svg> 

Answer 3

Вы можете использовать медиа-запрос, чтобы изменить непрозрачность или удалить фон при достижении определенной высоты. Вы можете использовать медиа-запросы в зависимости от высоты/ширины/обоих и т. Д.

Fiddle - играйте с высотой iframe, потянув разделитель между полем css и полем предварительного просмотра вверх и вниз.

.network { 
    position: relative; 
    height: 50%; 
    width: 100%; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 

.network::before { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: url(http://i.imgur.com/w5BnMSf.png) , #f6f8f8; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: contain; 
    content: ''; 
} 

@media (max-height: 700px) { /** play with the numbers to find the right height **/ 
    .network::before { 
    opacity: 0.5; 
    } 
} 

@media (max-height: 500px) { /** play with the numbers to find the right height **/ 
    .network::before { 
    display: none; 
    } 
} 

Answer 4

Вы также можете сделать теневой трюк на небольших экранах.

https://jsfiddle.net/azvmaby1/

@media (max-width: 768px){ 
p { 
    text-shadow: #f6f8f8 1px 0px, #f6f8f8 1px 1px, #f6f8f8 0px 1px, #f6f8f8 -1px 1px, #f6f8f8 -1px 0px, #f6f8f8 -1px -1px, #f6f8f8 0px -1px, #f6f8f8 1px -1px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px, #f6f8f8 0 0 3px; 
} 
}