Недопустимое значение свойства CSS для фона с изображением и градиентом расширения.
Chrome начал предупреждать меня о моих устаревших градиентах:
Invalid CSS property value: right no-repeat url('../Images/Logo_white.png'), -moz-linear-gradient(bottom, #899fa6, #3e545c) Это только для расширений для o, moz и ms:
background: right no-repeat url('../Images/CompanyLogo.png'), -moz-linear-gradient(bottom, #000000, #ffffff); Один для webkit в порядке:
background: right no-repeat url('../Images/CompanyLogo.png'), -webkit-linear-gradient(bottom, #000000, #ffffff); Расширения-градиенты не генерируют предупреждение, когда они используются отдельно, а не в сочетании с изображением.
Chrome предупредит о префиксах браузера для других браузеров, потому что он не может интерпретировать эти значения. Если вы посмотрите на страницу в FireFox, она должна предупредить вас о webkit префиксы браузера и не предупреждать вас о moz приставка — Zach Saucier
Итак, я должен принять предупреждения или подать жалобу на Chrome? — Sop Killen
Примите предупреждения, это то, что он должен делать — Zach Saucier
Есть ли что-то еще, что я могу адресовать? — Zach Saucier
Последняя часть. Почему он жалуется только тогда, когда я комбинирую его с изображением, как в моем примере. Не для фона: только -moz-linear-gradient. — Sop Killen
2 ответы
Причина, по которой вы получаете предупреждения от инструмента разработчика Chrome, заключается в том, что значения действительно недействительны для Chrome. Однако это не должно вас тревожить, потому что так оно и было задумано.
В CSS, если что-то определено неправильно или не распознано браузером, то это просто пропускается, ничего не делается и выдает только предупреждение, а не ошибку. Именно такое поведение позволяет работать префиксам поставщиков. Возьмем, к примеру, вашу собственную ситуацию:
background: right no-repeat url('../Images/CompanyLogo.png'), -moz-linear-gradient(bottom, #000000, #ffffff); background: right no-repeat url('../Images/CompanyLogo.png'), -webkit-linear-gradient(bottom, #000000, #ffffff); background: right no-repeat url('../Images/CompanyLogo.png'), linear-gradient(bottom, #000000, #ffffff); Chrome проходит через каждый background свойство и видит, какое из них он может интерпретировать. Он не может интерпретировать первый градиент, потому что не распознает -moz- как это делает Firefox. Это может интерпретировать второй, потому что он имеет -webkit- приставка. Это может Также интерпретировать третий фон, потому что Chrome поддерживает градиенты CSS без префикса.
Поскольку несколько атрибутов CSS влияют на одно и то же ( background ), будет использоваться самая последняя из перечисленных (версия без префикса). Предупреждение будет отображаться для неинтерпретированного первого background , но это не повлияет на проект.
Да, предупреждения должны быть просмотрены и проанализированы, как правило, рассматриваются как ошибки. С учетом сказанного, дело, которое вы поднимаете о префиксах браузера, является правильным способом сделать это, поэтому предупреждения должны быть приняты. В идеальном мире они бы вообще не отображались, они бы поняли, что это предназначено для другого браузера, но нет причин беспокоиться об этом, потому что это действительно правильный способ сделать это.
Проблема с такого рода предупреждениями заключается в том, что они могут в конечном итоге скрывать настоящие проблемы, если все программисты узнают, что предупреждения всегда можно и нужно игнорировать. Например, на работе мы пытаемся использовать предупреждения как ошибки для кода C#. Я собирался убрать все предупреждения в консоли devtools. Но из вашего сообщения я предполагаю, что это невозможно при поддержке устаревших браузеров? Что касается -moz-linear-gradient, я что-то пропустил? Похоже, он существует для меня: developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient См. внизу страницы, /* Для старых Fx (от 3.6 до 15) */ — Соп Киллен
Согласен, я отношусь к большинству предупреждений как к ошибкам, как и все остальные. При этом предупреждения, которые вы выдвигаете, в частности, должны быть приемлемыми, потому что они предназначены для разработки кросс-браузерных решений. Он отличается от такого языка, как C#, потому что C# работает одинаково независимо от того, какая программа его запускает (вообще говоря). Веб-программисты должны знать, какие предупреждения допустимы. И вы могли бы быть правы, говоря, что -moz-linear-gradient , я собирался могу ли я использовать документация — Зак Сосье
Ничего страшного. На caniuse, если вы нажмете ссылку «Показать все версии», будут показаны более старые версии браузера, включая версии Firefox, в которых используется -moz. — Соп Киллен
@SopKillen Обновил мой ответ, чтобы отразить нашу дискуссию — Зак Сосье
Обновил мой пост. Не уверен, что делать с этим ответом. Это была хорошая дискуссия, но желаемым ответом на мой пост была бы ссылка на этот отчет об ошибке. Должен ли я все еще принимать? — Соп Киллен
Я нашел эту ошибку в инструментах разработчика Chrome:
Похоже, что они временно отключат предупреждения CSS из-за слишком большого количества ложных срабатываний (включая действительный CSS для устаревших браузеров, если верить автору заявки), пока они не исправят это.
Скорее всего, эти предупреждения являются частью этих ложных срабатываний. Буду следить за вопросом.
Invalid property value css background image
Asked by:
Question
User1349647816 posted
Hi, I am rendering the the background image on a div using asp.net mvc, the rendered html appears as follows Now this syntax appears correct my in the chrome dev tools I get the message «Invalid property value» and the background image for the div isn’t rendered, the permissions on the folder is fine and the path is correct — any ideas why this is happening?
All replies
Now this syntax appears correct my in the chrome dev tools I get the message «Invalid property value»
User753101303 posted
Hi, You are showing this page through http ? Most if not all browsers won’t allow to access local resources from a web page. Place this image on your web server and use a url.
User-474980206 posted
A page served up by MVC, can not reference local files on the client machine.
The error point is that Invalid property value, so just change a bit (replace ‘\’ with ‘/’ to image path); Here is my code and it works well ,it could display the image as background image normally:
Invalid property value css ошибка padding
I am getting invalid property value for padding and I don’t know why. This code is written in ruby btw. When I check with the browser it has the right value pixels, however it is crossed out w a line and it isn’t reading that attribute. Thanks in advance.
AA asked Apr 25, 2013 at 16:21
There should not be a comma between your values:
answered Apr 25, 2013 at 16:26
71.6k 13 gold badges 124 silver badges 146 bronze badges
I don’t understand what’s wrong with this? I’m watching a tutorial and it seems to work fine on the video but both mozilla and chrome ignore this code and marks it as an invalid property value.
Because background is a shorthand property for
- background-color
- background-image
- background-position
- background-repeat
- background-attachment
answered Apr 27, 2013 at 4:22
Dipesh Parmar Dipesh Parmar
27k 8 gold badges 60 silver badges 90 bronze badges
If you are using inverted commas in your CSS, please remove them from your CSS file.
For example, find difference between each CSS rule set for .row :
4,568 8 gold badges 33 silver badges 44 bronze badges
answered Oct 14, 2020 at 10:06
269 4 silver badges 4 bronze badges
Not directly a solution but a typo in CSS property value caused similar issue for me:
The problem was a typo solic instead of solid.
answered Dec 16, 2019 at 15:46
Illegal Argument Illegal Argument
10.1k 2 gold badges 43 silver badges 60 bronze badges
I tried to apply background but there was a typo.
simply remove the double quotes from the value. as the hex value in css is not in double quotes.
answered Jan 20, 2021 at 12:44
background-color: #4FB69F; background-image: url('images/texture.png'); background-repeat: no-repeat; background-position: right top; Within the image url requires ‘ not «
Background position is separate from no repeat
and ; between each element control
2,538 1 gold badge 24 silver badges 28 bronze badges
answered Dec 25, 2016 at 20:26
You can use the shorthand property background:
It does not matter if one of the property values is missing, as long as the other ones are in this order.
know more
answered Jun 15, 2021 at 7:47
I have some very simple HTML/CSS code, and no matter what I do, I always get an «invalid property value» exception by chrome, and the logo won’t position properly.
Fixed the first problem, but now the image does not move related to the border.
* < padding: 0; margin: 0; >.header < width: 100%; height: 100px; border: none; border-bottom-style: solid; border-bottom-width: 5px; position: relative; border-bottom-color: rgb(220,30,60); >.logo 
I had a similar issue for me.
I wrote 10 (instead of 10px ), this fixed the issue.
answered Mar 15, 2019 at 3:20
If you are using single quotes in your css, Please remove single quotes from your css file.
answered Oct 14, 2020 at 10:03
269 4 silver badges 4 bronze badges
I just don’t understand why you used padding-bottom instead of bottom in this case. Anyway:
* < padding: 0; margin: 0; >.header < position: relative; height: 100px; border-bottom: 5px solid rgb(220,30,60); >.logo CSS bottom property: http://www.w3schools.com/cssref/pr_pos_bottom.asp
CSS padding-bottom property: http://www.w3schools.com/cssref/pr_padding-bottom.asp
1,751 2 gold badges 16 silver badges 27 bronze badges
answered Nov 8, 2016 at 14:27
3,409 5 gold badges 37 silver badges 68 bronze badges
There’s a space before the px in padding-bottom:50 px; . Fix:
answered Nov 8, 2016 at 14:23
Paul Redmond Paul Redmond
3,276 4 gold badges 32 silver badges 52 bronze badges
Solution 1
I just don’t understand why you used padding-bottom instead of bottom in this case. Anyway:
* < padding: 0; margin: 0; >.header < position: relative; height: 100px; border-bottom: 5px solid rgb(220,30,60); >.logo CSS bottom property: http://www.w3schools.com/cssref/pr_pos_bottom.asp
CSS padding-bottom property: http://www.w3schools.com/cssref/pr_padding-bottom.asp
Solution 2
I had a similar issue for me.
I wrote 10 (instead of 10px ), this fixed the issue.
Solution 3
If you are using single quotes in your css, Please remove single quotes from your css file.
Solution 4
There’s a space before the px in padding-bottom:50 px; . Fix:
Comments
I have some very simple HTML/CSS code, and no matter what I do, I always get an «invalid property value» exception by chrome, and the logo won’t position properly. Fixed the first problem, but now the image does not move related to the border.
* < padding: 0; margin: 0; >.header < width: 100%; height: 100px; border: none; border-bottom-style: solid; border-bottom-width: 5px; position: relative; border-bottom-color: rgb(220,30,60); >.logo Recents
If there’s a lot of properties, like 20, it’s kind of embarrassing to write a class for a long time. If it is necessary to define the OBD table with many properties, it may be possible to use T4 — code generator Visual Studio.To this end, in Visual Studio, have to press Ctrl+Shift+A, Ctrl+E, dial t4, and choose Text Template. In the established file, TextTemplate.tt indicate the following code:
var cs = @»Data Source=(localdb)DB;Initial Catalog=Test;Integrated Security=True;»;
var cn = new System.Data.SqlClient.SqlConnection(cs);
// тут читаем схему базы дынных и создаем коллекцию имен и типов свойств
// …
var ps = new [] new [] < «p1», «int» >,
new [] < «p2», «string» >
// … много других элементов
>;
#>
namespace App public class Wrapper
public virtual < get; protected set; >
#>
>
>
If the textTemplate is retained, the textTemplate.s namespace App public class Wrapper public virtual int p1 < get; protected set; >
public virtual string p2 < get; protected set; >
>
>