Поместите изображение в центр нижней границы с помощью CSS

Все объяснено в заголовке этого сообщения. Я пытаюсь поместить изображение PNG в центральную нижнюю границу элемента div.Поместите изображение в центр нижней границы с помощью CSS

.content_block { 
 
    border: ridge; 
 
    border-width: 1px; 
 
    border-color: #969696; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.content_block.orange { 
 
    background-image: linear-gradient(#FBB03B, #FF9933); 
 
}

<div class="content_block orange"></div>

Вот образ того, что я пытаюсь сделать:

Я искал сеть способ, который с помощью CSS, и границы-изображения и прочее, но ничего не получилось.

источник

2016-01-17 Mathemagician

Для достижения эффекта причем именно в середине границы, вы должны включать границу с изображением по наследованию, и делает его невидимым. Таким образом, вы можете «рассчитать» его.

См. this Fiddle за эффект. В этом Fiddle я создал псевдоэлемент, который имеет фоновое изображение кнопки воспроизведения.

CSS-что делает трюк заключается в следующем:

div::after{ 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    width: 30px; 
    height: 30px; 
    background-image: url('http://www.iconsdb.com/icons/preview/gray/video-play-3-xxl.png'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    transform: translate(-50%, -50%); 
    border-top: inherit; 
    border-top-color: transparent; 
}

Я положил его к абсолютному нижней и 50% с левой стороны. Затем, используя свойство transform, я переместил его на центр вокруг этих точек (50% слева и 100% сверху);

Затем, чтобы заставить его двигаться вместе с границей, я унаследовал только верхнюю часть и сделал ее невидимой.

источник

2016-01-17 20:35:21

добавить html, так как просто css (без объяснения того, какой элемент использовать) сложно реализовать. Я должен был пойти в jsfiddle, чтобы понять это. Возможно, попробуйте использовать фрагмент Stackoverflow? –

Я отредактировал свой ответ, чтобы быть полностью понятным без HTML –

Добавить IMG в HTML

<div class="content_block orange"> 
     <img class='element' src='https://cdn0.iconfinder.com/data/icons/form-elements-kit/100/checked-green-rounded-01-128.png'/> 
</div>

Добавьте это в CSS.

.element { width:32px; 
       height:33px; 
       display:block; 
       background-color:grey; 
       margin-left:auto; 
       margin-right:auto; 
       margin-top:185px; 
       border-radius:100%; 
}

Надеюсь, что это поможет!

источник

2016-01-17 20:18:25 Bishop

Да, но что происходит, когда вам действительно нужно положить элемент или что-то еще? Это пример! – Bishop

Во всяком случае, это должно быть 'img', а не' div'. Семантический ** ИС ** важен. –

Рад, что ты это указал! Я редактировал код. Лучше? :) – Bishop

.content-block { 
 
    position: relative; 
 
    width: 200px; height: 100px; 
 
    border: 1px solid #f0f; 
 
} 
 
.content-block img{ 
 
    position: absolute; 
 
    left: 50%; bottom: 0; 
 
    width: 50px; height: 50px; margin: -25px; 
 
}

<div class="content-block"> 
 
    <img src="http://placehold.it/50x50" alt=""> 
 
</div>

Если у вас есть relative расположенный родитель, вы можете манипулировать положение внутреннего ребенка с помощью position:absolute;

источник

2016-01-17 20:18:38

Поскольку в HTML-коде OP нет элемента 'img', я уверен, что он хочет этого добиться без изменения HTML. –

@Gothdo ** По назначению. ** Я не использовал псевдонимы ': after' not': before', потому что OP явно использовала кнопку взаимодействия с пользовательским интерфейсом. Выключить событие только для этого псевдоэлемента, используя JS? Невозможно (ну, возможно, отслеживая координаты положения мыши ...и т. д.). Используя принятый ответ, все, что вы можете сделать, это прослушать щелчок на огромном родителе. –

Вы можете спекулировать, но ОП на самом деле ничего не сказал об этом. –

-2

поместить изображение внутри оранжевой DIV и добавить text-align:center в DIV

<div class="content_block orange"> 
    <img src="" height="30" width="30"> 
</div>

, а затем установить margin-top к img. Проверьте Fiddle

источник

2016-01-17 20:22:28

Поместите изображение в центр нижней границы с помощью CSS

ответ

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