Как использовать линейные градиенты css в IE10?

В IE10 я пытаюсь создать линейный градиент css, от верхней части страницы до нижней части страницы. Это то, что я до сих порКак использовать линейные градиенты css в IE10?

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test</title> 
    </head> 
    <body> 

     <meta http-equiv="X-UA-Compatible" content="IE=10"> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

     <script type='text/javascript' src='./includes/js/jquery-2.0.0.min.js'></script> 
     <link rel='stylesheet' type='text/css' href='./includes/css/css.css'/> 




     <p id="title"> 
      Test 
     </p> 


    </body> 
</html>

Css

body { 
    margin: 0px; 
    padding: 0px; 
    background-image: linear-gradient(to bottom, #dcdcdc 0%, #b0b0b0 100%); 
} 



#title { 
    color:red; 
}

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

enter image description here

Кто-нибудь знает, что случилось?

источник

2013-04-24 omega

Есть ли в вашем теле страницы какой-либо контент? Возможно, вам нужно предоставить фактический снимок экрана, который вы видите с помощью этого CSS (и используемой разметки). – BoltClock

да, но css находится в теге тела, что означает, что он должен покрывать всю страницу, не так ли? В настоящее время он охватывает всю страницу, но он повторяется на высотах около 100 пикселей. – omega

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

Это не проблема с IE10; на самом деле, это по дизайну.

Фоны имеют special behavior при применении к body и/или html. При применении фона к body, не касаясь html, что происходит в том, что тело фон получает распространяется на видовой, и что фон действует, как если бы это было объявлено на html:

Для документов, для которых корневого элемента является HTML Элемент HTML или элемент XHTML html: если вычисленное значение «background-image» для корневого элемента «нет», а его «фоновый цвет» является «прозрачным», пользовательские агенты должны вместо этого распространять вычисленные значения свойств фона из первого элемента HTML BODY или XHTML body. Используемые значения этих фоновых свойств элемента BODY являются их начальными значениями, а распространенные значения обрабатываются так, как если бы они были указаны в корневом элементе.

Несмотря на то, что появляется в противном случае, htmlbody и элементы на самом деле не начать с внутренней высотой 100% (за исключением IE в режиме совместимости); скорее они берут высоту своего содержимого, как и любые другие блок-боксы. Это означает, что html имеет ту же высоту, что и объединенная высота вашего элемента p и его значения по умолчанию (которые сбрасываются с помощью элемента body).

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

Если вы хотите, чтобы сделать градиент растяжку через весь видовом, даже если не хватает контента для всей страницы, просто добавьте это правило:

html { 
    min-height: 100%; 
}

Если вы хотите, вы можете переместить фон стилей от body до html, но пока вы только устанавливаете фон на одном из этих элементов за раз, не имеет значения, к какому из них вы его применяете.

источник

2013-04-24 01:03:39 BoltClock

Спасибо, что сработало красиво, но используя высоту: 100% и привязку к фону, это сохраняет градиент одинаково независимо от того, где вы прокручиваете. Есть ли способ на самом деле растянуть градиент от вершины до самого конца (включая прокрутку)? – omega

@omega: Тогда это будет 'min-height: 100 %' вместо. Я отредактировал свой ответ. – BoltClock

Да, что сработало. – omega

Это зафиксированное ниже сообщение помогло мне.Просто добавьте

background-attachment:fixed

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

источник

2016-03-11 06:41:14

Как использовать линейные градиенты css в IE10?

ответ

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