Подтвердить что ты не робот

Можно ли добавить цвет фона только для заполнения?

У меня есть поле заголовка, включая границу и дополнение и цвет фона для этого окна, можно ли изменить цвет фона только для заполненной области после границы и затем одного и того же цвета фона для остальной ширины (т.е. серого в данном коде)?

Просто щепотка кода, в котором я хочу добавить цвет фона:

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
}
4b9b3361

Ответ 1

Другой вариант с чистым CSS будет примерно таким:

nav {
    margin: 0px auto;
    width: 100%;
    height: 50px;
    background-color: white;
    float: left;
    padding: 10px;
    border: 2px solid red;
    position: relative;
    z-index: 10;
}

nav:after {
    background-color: grey;
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: -1;
}

Демо здесь

Ответ 2

Мне жаль всех, что это решение является истинным, где вам не нужно на самом деле устанавливать дополнение.

http://jsfiddle.net/techsin/TyXRY/1/

Что я сделал...

  • Применяется два градиента на фоне с обоими начальными и конечными цветами. Вместо использования сплошного цвета. Причина в том, что у вас не может быть двух сплошных цветов для одного фона.
  • Затем применили к каждому свойству различные свойства фона.
  • таким образом, один цвет расширяется до области содержимого, а другой - к границе, показывая отступы.

Умный, если я так говорю.

div {
    padding: 35px;
    background-image: linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}

Ответ 3

Используйте свойства background-clip и box-shadow.

1) Установите background-clip: content-box - это ограничивает фон только самим содержимым (вместо того, чтобы покрывать как дополнение, так и границу)

2) Добавьте внутренний box-shadow с радиусом распространения, равным тому же значению, что и заполнение.

Так скажите, что заполнение 10px - установлено box-shadow: inset 0 0 0 10px lightGreen - это сделает только зону заполнения зеленой.

Демо версия Codepen

nav {
  width: 80%;
  height: 50px;
  background-color: gray;
  float: left;
  padding: 10px; /* 10px padding */
  border: 2px solid red;
  background-clip: content-box; /* <---- */
  box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */
}
ul {
  list-style: none;
}
li {
  display: inline-block;
}
<h2>The light green background color shows the padding of the element</h2>
<nav>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="/about/">About</a>
    </li>
    <li><a href="/blog/">Blog</a>
    </li>
  </ul>
</nav>

Ответ 4

Вы можете использовать фоновые градиенты для этого эффекта. Для вашего примера просто добавьте следующие строки (это всего лишь код, потому что вы должны использовать префиксы поставщика):

background-image: 
    -moz-linear-gradient(top, #000 10px, transparent 10px),
    -moz-linear-gradient(bottom, #000 10px, transparent 10px),
    -moz-linear-gradient(left, #000 10px, transparent 10px),
    -moz-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -o-linear-gradient(top, #000 10px, transparent 10px),
    -o-linear-gradient(bottom, #000 10px, transparent 10px),
    -o-linear-gradient(left, #000 10px, transparent 10px),
    -o-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -webkit-linear-gradient(top, #000 10px, transparent 10px),
    -webkit-linear-gradient(bottom, #000 10px, transparent 10px),
    -webkit-linear-gradient(left, #000 10px, transparent 10px),
    -webkit-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    linear-gradient(top, #000 10px, transparent 10px),
    linear-gradient(bottom, #000 10px, transparent 10px),
    linear-gradient(left, #000 10px, transparent 10px),
    linear-gradient(right, #000 10px, transparent 10px);

Нет необходимости в ненужной разметке.

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

Хотя вы могли бы также использовать псевдоэлементы для достижения желаемого эффекта, я бы посоветовал это сделать. Псевдоэлементы очень мощный инструмент CSS, если вы "тратите" их на такие вещи, вы, вероятно, будете скучать по ним где-то в другом месте.

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

Ответ 5

ответы говорят, что все возможные решения

У меня есть еще один BOX-SHADOW

здесь JSFIDDLE

и код

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
    box-shadow: 0 0 0 10px blue inset;
}

он также поддерживает в IE9, поэтому лучше, чем градиентное решение, добавьте правильные префиксы для большей поддержки

IE8 не поддерживает его, какой позор!

Ответ 6

Вы не можете установить цвет прокладки.

Вам нужно будет создать элемент оболочки с желаемым цветом фона. Добавьте границу к этому элементу и установите его дополнение.

Посмотрите здесь: http://jsbin.com/abanek/1/edit

Ответ 7

Это будет подходящее решение для CSS, которое также работает для IE8/9 (IE8 с html5shiv of the course): codepen

nav {
  margin:0px auto;
  height:50px;
  background-color:gray;
  padding:10px;
  border:2px solid red;
  position: relative;
  color: white;
  z-index: 1;
}

nav:after {
  content: '';
  background: black;
  display: block;
  position: absolute;
  margin: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

Ответ 8

Я бы просто обернул заголовок другим div и сыграл с границами.

<div class="header-border"><div class="header-real">

    <p>Foo</p>

</div></div>

CSS

.header-border { border: 2px solid #000000; }
.header-real { border: 10px solid #003399; background: #cccccc; padding: 10px; }

Ответ 9

Для этого нет точной функциональности.

Без обертывания другого элемента внутри вы можете заменить рамку теневой коробкой и прописью по границе. Но помните, что box-shadow не добавляет к размерам элемента.

jsfiddle работает очень медленно, иначе я бы добавил пример.

Ответ 10

Вы можете сделать div над дополнением следующим образом:

<div id= "paddingOne">
</div>
<div id= "paddingTwo">
</div>

#paddingOne {
width: 100;
length: 100;
background-color: #000000;
margin: 0;
z-index: 2;
}
#paddingTwo {
width: 200;
length: 200;
background-color: #ffffff;
margin: 0;
z-index: 3;

ширина, длина, цвет фона, поля и z-индекс могут варьироваться, конечно, но для покрытия заполнения, индекс z должен быть выше 0, чтобы он лежал над дополнением. Вы можете поиграть с позиционированием и тем самым изменить свою ориентацию. Надеюсь, что это поможет!

P.S. divs - html, а #paddingOne и #paddingTwo - css (в случае, если кто-то не получил это:)