Изменение размера фонового изображения в неупорядоченном списке (li)

У меня есть неупорядоченный список, то есть определенный размер на строку, и каждая строка имеет фон, я хочу, чтобы фон был изменен и был идеально подогнан (уменьшен), чтобы соответствовать ширина коробки, я пытался и не могу заставить его работать, я сделал упрощенную версию того, что я здесь, в этом JSFiddle -Изменение размера фонового изображения в неупорядоченном списке (li)

https://jsfiddle.net/p91vef0j/

HTML

<ul> 
    <li style='border: 1px solid black; background: url(http://i67.tinypic.com/xlcq5w.jpg)'> 
    <span style="background-color: #000000"> 
     Marvel's Avengers Assemble - S3E1 </br> 
     Adapting to Change 
    </span> 
    </li> 
</ul>

CSS

li{ 
    list-style:none; 
    color: white ; 
    padding-left: 0pt; 
    margin-top:0px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 60px; 
    width: 270px; 
} 

ul { 
    padding-left: 0px; 
    padding-top: 0px; 
}

Надеюсь, кто-то может получить изображение в коробке для меня.

источник

2016-03-13 Karl

Ваша проблема заключается в том, что вы устанавливаете background-size: cover в CSS, но устанавливаете background с помощью встроенных стилей. background является свойством короткого рука, которая включает в себя следующее:

background-size
background-color
background-image
background-position
background-repeat
background-attachment

Когда вы устанавливаете значение background, URL-адрес применяется к background-image, а другим свойствам присваивается их начальное значение. Ниже, что spec говорит:

Учитывая действительную декларацию, для каждого слоя сокращенных первым устанавливает соответствующий слой каждые из «фонового изображения», «фон положение», «фон-размер», «background-repeat», «background-origin», «background-clip» и «background-attachment» к этому начальному значению этого свойства, затем присваивает любые явные значения, указанные для этого слоя в объявлении. Наконец, «background-color» установлен на указанный цвет, если он есть, иначе устанавливается его начальное значение.

Это предотвращает эффект background-size (устанавливается через CSS). Вы должны либо установить background-image непосредственно с помощью встроенных стилей (или) также установить background-size.

li { 
 
    list-style: none; 
 
    color: white; 
 
    padding-left: 0pt; 
 
    margin-top: 0px; 
 
    background-size: cover; 
 
    height: 60px; 
 
    width: 270px; 
 
} 
 
ul { 
 
    padding-left: 0px; 
 
    padding-top: 0px; 
 
}

<ul> 
 
    <li style='border: 1px solid black; background: url(http://i67.tinypic.com/xlcq5w.jpg); background-size: cover;'> 
 
    <span style="background-color: #000000"> Marvel's Avengers Assemble - S3E1 <br> Adapting to Change</span> 
 
    </li> 
 
    <li style='border: 1px solid black; background-image: url(http://i67.tinypic.com/xlcq5w.jpg);'> 
 
    <span style="background-color: #000000"> Marvel's Avengers Assemble - S3E1 <br> Adapting to Change</span> 
 
    </li> 
 
    <li style='border: 1px solid black; background-image: url(http://i67.tinypic.com/xlcq5w.jpg); background-size: 100% 100%'> 
 
    <span style="background-color: #000000"> Marvel's Avengers Assemble - S3E1 <br> Adapting to Change</span> 
 
    </li> 
 
</ul>

Примечание: Вы можете рассмотреть вопрос об изменении значения background-size также. Опция cover масштабирует изображение, сохраняя его соотношение сторон. Таким образом, если соотношение сторон изображения отличается от формата изображения li, изображение будет обрезано справа и/или снизу. Если вы хотите избежать обрезки, вы можете использовать 100% 100% как значение (как в третьем li в приведенном выше фрагменте).

источник

2016-03-13 12:18:40 Harry

К сожалению, я не совсем понимаю, линия Backgroud-изображения приходит из PHP Еогеасп заявления, поэтому они должны быть определены рядным, вы говорите, мне нужно, чтобы установить размер встроенный, а не через css? Можете ли вы показать мне, что это «исправлено» в моей скрипке? Спасибо, что нашли время, чтобы помочь мне .. – Karl

Хорошо, теперь я вижу ваши примеры, извините, что я по телефону, попробую и пометить как ответ в немного. Спасибо. – Karl

Легенда, последнее редактирование со 100% 100% выполнило то, что я хочу :) Большое спасибо за то, что нашли время, чтобы помочь мне. :) – Karl

Вместо того чтобы пытаться установить изображение в качестве фона, почему бы не использовать элемент img для отображения изображения внутри li. Затем установите для текста и img значение position:absolute; и установите li на position:relative;. Также вам нужно будет установить текст и img на top:0px;.

li{ 
 
    list-style:none; 
 
    color: white \t ; 
 
    padding-left: 0pt; 
 
    margin-top:0px; 
 
    position:relative; 
 
    } \t 
 
    li img{ 
 
    position:absolute; 
 
    top:0px; 
 
    } 
 
    li span{ 
 
    position:absolute; 
 
    top:0px; 
 
    } 
 

 
ul { 
 
    padding-left: 0px; 
 
    padding-top: 0px; 
 
}

<ul> 
 
    <li style='border: 1px solid black;'> 
 
    <img src="http://i67.tinypic.com/xlcq5w.jpg"/> 
 
    <span> Marvel's Avengers Assemble - S3E1 </br> Adapting to Change</span> 
 
    </li> 
 
</ul>

источник

2016-03-13 12:20:41 Wowsk

Изменение размера фонового изображения в неупорядоченном списке (li)

ответ

Смежные вопросы