Как использовать CSS и изображения для создания раздела закругленного заголовка на странице HTML?

Question

Как использовать CSS и изображения для создания раздела закругленного заголовка на странице HTML?

0

Это был глоток....

Итак, я застрял в изображении от маркетинга, у которого есть фотография некоторых людей, у него верхние левые и правые углы округлены. И у него есть переход градиента снизу вверх (синий - в более светлый оттенок).

Итак, что я сделал, обрезал закругленные углы LEFT (180px x 10px) и RIGHT (180px x 10px) и сделал из них отдельные изображения, а затем обрезал другое изображение, содержащее только синий градиент (180 пикселей x 10 пикселей без людей в нем), а остальное - изображение с людьми в нем (180 пикселей x 461 пиксель). Знаю, что у меня всего 4 изображения.

Наконец, вопрос:

Как я могу упорядочить div заполнителя так, чтобы он расширялся и сокращался при повторной калибровке браузера (заполняет пространство между левым закругленным углом и изображением людей?

Спасибо, Стивен

<style>
#left {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 10px;
    background-image: url("@Url.Content("~/Content/images/login/left.png")");
}  

#filler {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 50px;
    background-image: url("@Url.Content("~/Content/images/login/filler.png")");
}  
#image {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 461px;
    background-image: url("@Url.Content("~/Content/images/login/image.png")");
}  
#right {
    height:180px;
    background-size: 100%;
    background-size: cover;
    background-position: center center;
    vertical-align: top;
    width: 10px;
    background-image: url("@Url.Content("~/Content/images/login/right.png")");
}  

</style>


<div class="row-fluid">
    <div id="left" class="pull-left"></div>    
    <div id="filler" class="pull-left"></div>
    <div id="right" class="pull-right"></div>
    <div id="image" class="pull-right"></div>   
</div>

Stephen Patten 12 нояб. 2013, в 01:46

Источник

0

Почему бы не использовать border-radius? Не видя поршня и изображений, трудно понять, что именно вы пытаетесь.
hugo der hungrige 12 нояб. 2013, в 00:08

Теги:

html

css

image

asp.net-mvc-4

2 ответа

1

<div class="row-fluid">
    <img src="http://mydomain.com/pic.jpg" />  
</div>

.row-fluid{
background: #fff;
}

.row-fluid img{
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}

и это демо: http://jsfiddle.net/Ashkanvb/rsPp2/

Ashkan Mobayen Khiabani 11 нояб. 2013, в 23:14

0

Согласно caniuse.com/border-radius, это должно работать на 80% пользователей. Похоже, хорошее решение для меня.
Jason Sperske 12 нояб. 2013, в 00:27
0

И есть ель с поли-заливкой, т.е. 6-8, хотя это немного сложнее: css3pie.com
Jason Sperske 12 нояб. 2013, в 00:31
0

в моем ответе была ошибка, я просто исправил ее.
Ashkan Mobayen Khiabani 12 нояб. 2013, в 00:33

Показать ещё 1 комментарий

Ещё вопросы

Почему бы не использовать border-radius? Не видя поршня и изображений, трудно понять, что именно вы пытаетесь.
Согласно caniuse.com/border-radius, это должно работать на 80% пользователей. Похоже, хорошее решение для меня.
И есть ель с поли-заливкой, т.е. 6-8, хотя это немного сложнее: css3pie.com
в моем ответе была ошибка, я просто исправил ее.

davidpauljunior · Accepted Answer · 2013-11-11T22-33-00.000Z

Я согласен с ответом на пограничный радиус. Но если получится (по какой-то причине), что вы должны использовать изображения, то там есть решение с некоторыми улучшенными HTML и CSS:

http://jsbin.com/AwUWabI/7/edit

Да, по какой-то причине (не включая логику) мне было поручено использовать изображения. Так что спасибо за очень хороший макет, Дэвид.
И спасибо, что включили меня в placehold.it , который решил, что я могу настроить плункер в будущем.