Панель поиска по изображению с радиусом границы

ProgramBox

Панель поиска по изображению с радиусом границы

Post author:admin
Запись опубликована:13 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

Я хочу установить панель поиска над изображением, как показано ниже, прикрепленное изображение, попробовал какой-то трюк, но он работает неправильно.

Я сталкиваюсь с трудностями при установке панели поиска с радиусом границы, который над изображением

 .img-border-rad {
  border-radius: 10px;
}

.progressbar {
  background-color: #b1b1b1;
}

.progressbar>div {
  background-color: #fa1212;
  height: 4px;
}

 <div class="img-pad">
  <img src="https://via.placeholder.com/600x100" class="img-border-rad">
  <div class="progressbar">
    <div style="width: 40%;"></div>
  </div>
</div>

Ответ №1:

Поместите обертку вокруг обоих элементов и установите радиус границы для этого. Скрыть переполнение на обертке.

 .border-rad {
  border-radius: 10px;
  overflow: hidden;
}

.progressbar {
  background-color: #b1b1b1;
}

.progressbar>div {
  background-color: #fa1212;
  height: 4px;
}

img {
  display: block; /* eliminates descender space below */
  max-width: 100%; /* demo only */
}

 <div class="img-pad border-rad">
  <img src="https://via.placeholder.com/700x100">

  <div class="progressbar">
    <div style="width: 40%;"></div>
  </div>
</div>

Ответ №2:

у Ишервуда есть более четкий ответ на представленный вами код. Тем не менее, я все еще хотел предложить свой ответ, поскольку это другой подход к той же проблеме. В приведенном ниже коде я полностью удаляю тег img и отображаю изображение в качестве фона контейнера. Затем я применяю стиль, чтобы определить ширину, высоту, радиус границы контейнера. Таким образом, индикатор выполнения будет располагаться поверх изображения, а не под ним.

 #test-image-container {
  position: absolute;
  height: 300px;
  width: 400px;
  background-image: url("https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}

.progressbar { 
  background-color: #b1b1b1; 
  position: absolute;
  bottom: 0;
  width: 100%;
}

.progressbar > div { 
  background-color: #fa1212; 
  height: 10px; 
}

 <div class="img-pad" id="test-image-container">
    <div class="progressbar">
      <div style="width: 40%;"></div>
    </div>
</div>

1. Это выглядит хорошо, но почему предпочтительнее затемнять часть изображения?

2. На YouTube, когда они предлагают индикатор выполнения, информацию о видео или элементы управления видео, информация будет отображаться поверх видео с помощью несколько прозрачной панели. Таким образом, экранная недвижимость не тратится впустую, а соотношение сторон миниатюр сохраняет целостность. Это не имеет большого значения для изображений, где его можно просто настроить, однако, если бы я намеревался в конечном итоге сделать предварительный просмотр, который воспроизводит небольшой клип, я бы хотел, чтобы при наведении курсора индикатор выполнения был полностью прозрачным. Также может быть просто дизайнерским выбором.

3. Да, но они также могут быть скрыты (и автоматически скрыты). Я не уверен, что это здесь уместно.

4. Да, в этой ситуации не имеет значения, скрывать экран или нет, это более прямое и ясное решение, которое вы предложили в ответ на вопрос. Я думаю, что мой ответ может быть полезен для других, которые найдут этот ответ с аналогичным вопросом. Есть также способы, чтобы прогресс охватывал img, не привязывая его к фоновому img, однако мне часто бывает проще работать с изображениями в качестве фона.

Ответ №3:

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

Изменения: положение и отображение на .border-rad и .progressbar.

ИЗМЕНИТЬ: Как выглядит предыдущий ответ в Chrome, когда я запускаю его во весь экран:

 .border-rad {
  display: inline-block;
  border-radius: 10px;
  overflow: hidden;
  position:relative;
}

.progressbar {
  background-color: #b1b1b1;
  position:absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.progressbar>div {
  background-color: #fa1212;
  height: 4px;
}

img {
  display: block; /* eliminates descender space below */
  max-width: 100%; /* demo only */
}

 <div class="img-pad border-rad">
  <img src="https://via.placeholder.com/700x100">

  <div class="progressbar">
    <div style="width: 40%;"></div>
  </div>
</div>

1. Полоса не проходит дальше изображения в моем примере. По крайней мере, не в Хроме.

2. Я добавил скриншот того, как это выглядит в Chrome, когда я запускаю обрезанный во весь экран. Удивляйтесь, почему этого не происходит с вашей стороны.

3. О, проблема в том, что изображение слишком маленькое. Оба они по — прежнему ограничены контейнером. Справедливо.

Ответ №4:

Ключевым моментом здесь является использование абсолютного положения, чтобы расположить индикатор выполнения в нижней части контейнера img-pad и настроить img-pad для отображения встроенного блока.

 .img-pad {
  display: inline-block;
  position: relative;
}

.img-border-rad {
  border-radius: 10px;
}

.progressbar {
  height: 4px;
  position: absolute;
  bottom: 4px;
  width: 100%;
  background-color: #b1b1b1;
}

.progressbar__done {
  height: 4px;
  position: absolute;
  background-color: #fa1212;
}

 <div class="img-pad">
  <img src="https://www.gravatar.com/avatar/dd7c1fa96edde079ae4b987eec68f6d1?s=420amp;d=identiconamp;r=PGamp;f=1" class="img-border-rad">
  <div class="progressbar">
    <div class="progressbar__done" style="width:40%;"></div>
  </div>
</div>

Отображение встроенного блока установите ширину div в соответствии с содержимым.
Абсолютное положение позволяет расположить div с использованием свойств «сверху», «слева», «справа», «снизу» внутри последнего элемента, для которого определена позиция.

Проверьте эти ссылки для получения дополнительной информации:

Посмотрите на эту скрипку: https://jsfiddle.net/wsc13gjf/

Метки: Панель поиска по изображению с радиусом границы