Вопрос по css, opacity, background-image –  Div имеет ширину 150px. Логотип Google имеет ширину более 150 пикселей, но его размер уменьшен, чтобы поместиться в элемент div. Значок Google Планета Земля имеет ширину менее 150 пикселей и масштабируется до размера делителя шириной 150 пикселей. Фоновый размер не работает в IE 8, поскольку это CSS 3, который по-прежнему не поддерживается.

60

я три проблемы:

Когда я попытался использовать фоновое изображение в div меньшего размера, div показывает только часть изображения. Как я могу показать полную или определенную часть изображения?

У меня есть уменьшенное изображение, и я хочу использовать в большем div. Но не хочу использовать функцию повтора.

Есть ли способ в CSS манипулировать непрозрачностью изображения?

@Ouadie - я не оригинальный постер - я просто отредактировал вопрос для ясности. David Cain
@ Давид-Каин, вы должны обновить наиболее подходящий ответ, как указано в комментариях ниже Ouadie
@ aakash-sahai Не могли бы вы обновить принятый ответ на самый подходящий? Ouadie

Ваш Ответ

7   ответов
2

Это будет работать как шарм.

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;
Благодарю. Искал специально для этого. Сделал это много лет назад и забыл. Alex Rogachevsky
содержать не охватывает весь div. Так что обложка, кажется, то, что ищет опера. webs
106

чтобы соответствовать размеру div.
С помощью CSS3 вы можете сделать это:

/* with CSS 3 */
#yourdiv {  
    background: url('bgimage.jpg') no-repeat;
    background-size: 100%;
}

Как растянуть фоновое изображение на веб-странице:

О непрозрачности

#yourdiv {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Или посмотрите наCSS непрозрачность изображения / прозрачность

но это создаст нагрузку на сервер для загрузки нескольких изображений (что аналогично, как известно), поэтому вместо использования нескольких изображений лучше использовать одно изображение и сложить их, но не знаю, как это сделать .. Aakash Sahai
IE не поддерживает это (размер bg). Что делать? KarSho
спасибо за непрозрачность вопроса ... Aakash Sahai
Пункты 1 и 2 не являются решением этой проблемы. Первый пункт - для сохранения пропорций на картинке, второй пункт, кажется, не работает вообще. С CSS3 свойство background-size решит эту проблему, до тех пор, пока вы не будете придерживаться некоторого хака, я думаю ... Sondre
9



#your-div {
    background: url("your-image-link") no-repeat;
    background-size: cover;
    background-clip: border-box;
}
Добро пожаловать в переполнение стека! Хотя этот ответ, вероятно, является правильным и полезным, желательно, чтобы вы включили вместе с ним какое-то объяснение, объясняющее, как оно помогает решить проблему. Это становится особенно полезным в будущем, если есть изменение (возможно, не связанное), которое заставляет его перестать работать, и пользователи должны понять, как это когда-то работало. Kevin Brown
64

не оставляя его незаполненной, используйте:

background-size: cover;
Это правильный ответ! Cody Potter
Спасибо! Это сработало для меня. pix1289
Самый маленький комментарий на этой странице и самое большое преимущество в моем случае. Спасибо Ruslan Abuzant
Не могли бы вы создать JSFiddle для вашего примера? так что мы можем помочь вам Ouadie
у меня не работает, но мой div находится внутри <th> внутри <tr> внутри <table>. не знаю, поэтому ли это user1709076
0

растяните изображение, чтобы оно подходило к div, но немного по-другому (без background-image, поскольку это немного негибко в css 2.1). Показать полное изображение:

<div id="yourdiv">
    <img id="theimage" src="image.jpg" alt="" />
</div>

#yourdiv img {
    width:100%;
  /*height will be automatic to remain aspect ratio*/
}

Показать часть изображения, используя background-position:

#yourdiv 
{
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: 10px 25px;
}

То же, что и в первой части (1), изображение масштабируется до div, так что больше или меньше будет работать

Так же, как Йосси.

эээ, форматирование моего поста не работает? Я использовал значок панели инструментов ... :( Bazzz
я попробовал это раньше и теперь также .. если размер изображения составляет 100px 100px, а div имеет размер 400px 400px, то он фиксируется в верхнем углу. сафари последние браузеры Aakash Sahai
Вот пример:jsfiddle.net/9mawE/1 Div имеет ширину 150px. Логотип Google имеет ширину более 150 пикселей, но его размер уменьшен, чтобы поместиться в элемент div. Значок Google Планета Земля имеет ширину менее 150 пикселей и масштабируется до размера делителя шириной 150 пикселей. Фоновый размер не работает в IE 8, поскольку это CSS 3, который по-прежнему не поддерживается. Bazzz
8

background-size:100%;
Мы можем датьbackground-size:contain;
Проверьте это для различных доступных вариантов:http://www.css3.info/preview/background-size/

10

Это отлично сработало для меня

background-repeat: no-repeat;
background-size: 100% 100%;
Это правильно. Это работает для меня. Lakin Mohapatra

Похожие вопросы