Background image width: CSS background-size property

css — Ширина фонового изображения

спросил 10 лет, 11 месяцев назад

Изменено 9 лет, 11 месяцев назад

Просмотрено 11 тысяч раз

Это мой HTML:

аватар пользователя класс следующий:

 #пользователь-аватар {
     ширина: 100 пикселей;
     высота: 100 пикселей;
     маржа: авто;
     положение: родственник;
     фон: url(images/avatars/128.jpg) 50% 50% без повторов;
}
 

Кадр:

 #user-avatar img {
     положение: абсолютное;
     верх: 50%;
     слева: 50%;
     ширина: 122 пикселя;
     высота: 127 пикселей;
     верхнее поле: -62px;
     поле слева: -63px;
}
 

Оригинал аватар пользователя Размеры фонового изображения 23×25, но я хочу, чтобы его размер был изменен до 100x100px, и проблема в том, что все, что я установил в

width: xxx атрибут работать не будет. Аватар, который находится за рамкой, всегда имеет свои первоначальные размеры.

• css
• изображение
• размеры

2

Вы не можете изменить размер изображения, установленного в качестве фона контейнера. Единственный способ изменить размер изображения — использовать тег img и изменить его размер с помощью атрибутов ширины и высоты css.

Посмотрите здесь, может поможет.

1

Вы можете использовать background-size , однако это поддерживают только самые современные браузеры: https://developer.mozilla.org/en/CSS/background-size

Вы можете использовать свойство background-size CSS3 для те браузеры, которые его поддерживают, а затем возвращаются к компромиссному решению для старых браузеров. Компромиссным решением может быть установка цвета фона для заполнения пространства вокруг фонового изображения или использование свойства background-repeat для «мозаики» изображения.

Например:

 #user_avatar {
    ...
    фон: url(images/avatars/128.jpg) синий 50% 50% без повторов;
    размер фона: 100px 100px;
}
 

2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Div с 2 фоновыми изображениями полной ширины, по 50% каждое? — HTML и CSS — Форумы SitePoint

инструментщик 28 августа 2019 г. , 20:23

#1

Привет,

Я пытаюсь создать div полной ширины, который имеет разное фоновое изображение слева и справа, но по 50% по ширине.

Вот что у меня есть, но не работает:

 .about-middle{
фон: #6c3dd1 url(../images/bg-purple.png) повтор слева, url('../images/bg-image.jpg') без повтора справа;
}
 

Левая сторона должна быть однотонной с прозрачным фоном сверху, а правая — фоновым изображением JPG.

Может ли кто-нибудь сказать мне, что я не так?

Спасибо.

ПолОБ 28 августа 2019 г., 21:02

#2

Я не думаю, что вы можете повторять несколько фоновых изображений и сохранять их размер равным 50% области просмотра (в любом случае вы не можете использовать фоновый цвет в сокращении).

Я бы просто использовал 2 псевдоэлемента и получил бы полный контроль.

 .о-среднем{
должность: родственница;
min-height:100vh;/* для тестирования*/
}
.о-середине:до{
содержание:"";
положение: абсолютное;
слева:0;
верх:0;
справа: 50%;
дно:0;
background:red url(images/image1.png) повторить 0 0;
z-индекс:-1;
}
.о-середине:после{
содержание:"";
положение: абсолютное;
слева: 50%;
верх:0;
справа: 0;
дно:0;
фон: url(images/image2.png) повторить 0 0;
z-индекс:-1;
}
 

1 Нравится

инструментщик 28 августа 2019 г., 21:09

#3

Спасибо, отлично сработало

Похоже, сработало с тем же фоновым изображением, например:

background: url('../images/bg-image.jpg') no-repeat left, url('. ./images/bg-image.jpg') право без повторов;

но не тогда, когда я добавил цвет фона

Еще раз спасибо

PaulOB 28 августа 2019 г.