WalkWeb
-
Posts
8 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by WalkWeb
-
-
Здравствуйте
Возможно ли на css сделать зеркальное отображение фоновой картинки?
-
Спасибо)
-
Необходимо указывать background: url из текста самой страницы, а также добавить свойство background-size: cover
И вот что заметил - если background-size: cover поместить в стили, то он не работает, а если также на самой странице - то работает:
<html> <head> <title>Background Size</title> <style> .true { width: 300px; height: 200px; border: 1px solid #888; } .false { width: 300px; height: 200px; border: 1px solid #888; background-size: cover; } </style> </head> <body> <div class="true" style="background: url(https://5pillarsuk.com/wp-content/uploads/2016/08/google.png) no-repeat center; background-size: cover;"></div> <div class="false" style="background: url(https://5pillarsuk.com/wp-content/uploads/2016/08/google.png) no-repeat center;"></div> </body> </html>
Но мне, разумеется, хотелось бы, чтобы css в html было меньше. Есть ли способы это сделать? (убрать background-size: cover в стили, но чтобы они работали).
-
Благодарю за подробный ответ.
-
Здравствуйте, делаю такие стили:
body { cursor: url("/images/pupbg.png"), auto; /* размер 4х4, вес 174 байта, работает */ } h1 { cursor: url("/images/unit.png"), auto; /* размер 170х200, вес 37 кбайт, не работает :( */ } h2 { cursor: url("/images/happy.png"), auto; /* размер 50х50, вес 5 кбайт, работает */ }
В первом и последнем случае курсор-картинка работает, во втором - нет.
Очевидно, что проблема в большом размере и весе картинки. Где-то можно узнать максимальные допустимые размеры? Пересмотрел пару десятков статей на эту тему - нигде такой информации не нашел.
-
Хотел написать "пробовал, не работает", но попробовал еще раз, и путь:
background: url('/crops/a7303253abf7706adcf83ca66d2daa53');
Обработался нормально - картинка отображается.
Странно, до этого пробовал тоже самое - не отображалось. Думал, что ему обязательно расширение файла нужно. -
Постараюсь объяснить проблему коротко и понятно.
Необходимо поправить верстку, по-сути, простой div с картинкой внутри. Для того, чтобы сделать что нужно, нужно картинку убрать, и сделать её в виде background-image у div-а. В целом ничего сложного, если бы не одно но:
Картинка вставляется через:
<img src="<?= ImgHelper::cropImg($new['image'], 800, 400) ?>" alt="" />
В html коде выглядит так:
<img src="/crops/a7305823253abf7706a" alt="" />
И отображается нормально. Но если пробую сделать стиль у блока
background: url('/crops/a7305823253abf7706a');
Картинка не отображается.
Вопрос - как быть? Вариант поправить бек-энд и получать прямые ссылки на картинки вида site.ru/images/img.jpg - не подходит, так как картинки берутся с другого сайта (и ImgHelper::cropImg в этом плане помогает избежать тысяч внешних ссылок).
Можно ли сделать зеркальное отображение фоновой картинки на css?
in HTML Coding
Posted
Спасибо, жаль.