Jump to content
  • 0

как убрать картинку на задний план

Daniil Khanin

Asked by Daniil Khanin,

 Share

Question

6 answers to this question

Recommended Posts

  • 0
orange_juice Explorer

orange_juice

Posted
Posted

ваши две ленты должны заползти как бы под эту горизонтальную линию - сделайте чтобы эта линия не была просто линией (через <hr> ), а была нижней границей блока, на котором находится ваш светло-голубой блок и надпись.
ну а потом уже добавить через псевдоэлемент ::after эти две ленточки, указав им z-index:-1; 

ИМХО должно сработать

Link to comment
Share on other sites
  • 0
Daniil Khanin Explorer

Daniil Khanin

Posted
  • Author
Posted (edited)

Orange, указывая z-index мы даем браузеру понять какой элемент находится поверх другого, вот у меня вот такой код (html , css) для белого меню навигации и изображения со стрелками, только вот не пойму почему не располагает стрелки под белым меню, ведь  я указал z-index для стрелок 0 а хедеру z-index 1 P.S. я понимаю  что за хедер мне надо спрятать нижнюю часть стрелки..А с псевдоэлементами ::after  or ::before  .я что-то вообще ничего не понял: для чего они, в Htmlbook  все примеры на тексте... не могу разобраться , объясните пожалуйста...

  :( c07bfbfe301a.png

<!Doctype html><html lang="Ru-ru"><head><meta charset="utf-8"/><link rel="stylesheet" type="text/css" href="D:\Вёрстка\css\style.css" /><title> Верстка шаблона №1</title><body>	<div class="header">		<div class="arrow">	<img src="D:\Вёрстка\img\arrow.png">	</div><!-- end arrow--!></div><!-- end header--!>*/css*/.header{height:90px;background-color:white;/*text-align:center;*/border-bottom:3px solid #bbd6ee; position:relative;z-index:1;}.arrow {float:left;position:relative;z-index:0}
Edited by Daniil Khanin
Link to comment
Share on other sites
  • 0
orange_juice Explorer

orange_juice

Posted
Posted (edited)

если у вас есть необходимое изображение,  проще всего будет обрезать его немного в Photoshop, и просто прикрепить через ::after  к вашему  header или лучше к тому синеватому блоку, после которого он должен быть расположен.
насчёт ::after - очень удобная штука, часто пользуюсь.
к примеру, есть блок
 

<div class="parent"></div>/*css*/.parent::after {content: '';		position:absolute;                height:20px;		width:20px;		background:black;		right:-10px; 		top:15px;}

в результате к нашему блоку добавится контент, в примере - пустой, т.к. в скобках в св-ве content - пусто(можно добавлять текст, цитату, и ещё что-то, не помню). контент шириной 20 на 20рх с черным фоном, которому мы задаём произвольную позицию, через position, right и top в примере.

так же можно спокойно добавить к нужному блоку ваше изображение.

преимущество в том, что  генерируется контент, которого изначально в html нет.
касательно z-index, пробуйте использовать значение "-1", тогда блок доллжен уйти вниз, т.к. z-index по умолчанию равен 0, также для самых верхних пробуйте брать числа побольше.
и да, z-index применится только в случае, если элемент позиционирован, то есть задано свойство position, отличное от static.

Edited by orange_juice
Link to comment
Share on other sites
  • 0
orange_juice Explorer

orange_juice

Posted
Posted

здесь всплывает проблема с тем, что картинка, по сути, позиционирована относительно всего общего блока header, который всегда занимает 100% ширины, а тот блок с адресом сайта и соседний с ним светло-синий блок - имеют фиксированную ширину. вот потому картинка и ездит, потому-что позиционирована относительно не того элемента, что нужно.

если уже собираетесь всё-таки крепить картинку просто div-ом, то оберните вашу надпись и синий блок ещё одним контейнером, и туда же внутрь добавляйте картинку, позиционируя её относительно уже внутреннего блока по правому краю, и задав этому внутреннему блоку фиксированную ширину.

хотя имхо - проще последовать совету автора выше, обработать картинку в редакторе и прицепить к синему блоку.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Balalayka
      Помогите с html/css кодом!
      By Balalayka
      Не могу расположить второй ряд картинок все div идут в одну строчку. Пробовал и команду clear (both, left) всем блокам прописан float:left.(Всё в конце кода). Заранее спасибо за помощь.На всякий случай прикреплю ещё картинки.
      index.html
      style.css









    • digenis
      Как расположить изображение и текст по левому и правому краю. В заголовке
      By digenis
      style.css

      index.html

    • Lex_85
      Появление лишнего отступа в блоке
      By Lex_85
      Здравствуйте! Есть небольшая проблема: имеется блок, в который вставляем строчные гиперссылки с изображениями внутри. Обнаружил, что в данном блоке появляется странный отступ снизу (зеленного цвета), от которого я не могу избавиться. Так как я новичок, то прошу помощи. Визуально проблему можно посмотреть здесь: https://jsfiddle.net. Проблема плевая, но я застрял . Заранее благодарю!
    • gadjet
      Не отображается картинка в теге <a>
      By gadjet
      Такая конструкция работает нормально
      <img src="/img/logo.png" alt="Logo" />
       
      Перестает работать внутри контейнера <a>. И локально и на хостинге, картинка не отображается
      <a href="/index.html>
      <img src="/img/logo.png" alt="Logo" />
      </a>
    • Elizabeth2018
      Как убрать отступ после изображения
      By Elizabeth2018
      Помогите пожалуйста, мне надо, чтобы текст отображался внизу картинки БЕЗ ОТСТУПОВ, сразу после картинки.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept