blocks|key|1232638|text|您可以使用css变量属性来完成它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1232639|样本代码|1232640|​|1232641|const+Root+++=+document.documentElement;

var+h_Pos+=+['center','right','left']++,+nPH+=+0
++,+v_Pos+=+['center','bottom','top']++,+nPV+=+0

btH.onclick=_=>+{+nPH+=+%2B%2BnPH+%253;+Root.style.setProperty('--PosH',+h_Pos[nPH])+}
btV.onclick=_=>+{+nPV+=+%2B%2BnPV+%253;+Root.style.setProperty('--PosV',+v_Pos[nPV])+}|code-block|syntax|javascript|1232642|:root+{
++--PosH++:+center;
++--PosV++:+center;
}
html+{
++height:+100%25;
++background:+orange+no-repeat+var(--PosH)+var(--PosV)+url(https://i.picsum.photos/id/926/200/200.jpg);
}|1232643|<button+id="btH">+change+horizontal+Position</button>
<button+id="btV">+change+vertical+Position</button>|1232644|1232645|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties^0|A|2|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|9|@]|C|$K|L]]|$1|O|3|P|5|J|7|17|8|@]|9|@]|C|$K|L]]|$1|Q|3|G|5|6|7|18|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]]]

<p>You can do it with css variables  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties</a></p>

<p>sample code</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const Root   = document.documentElement;

var h_Pos = ['center','right','left']  , nPH = 0
  , v_Pos = ['center','bottom','top']  , nPV = 0

btH.onclick=_=&gt; { nPH = ++nPH %3; Root.style.setProperty('--PosH', h_Pos[nPH]) }
btV.onclick=_=&gt; { nPV = ++nPV %3; Root.style.setProperty('--PosV', v_Pos[nPV]) }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
  --PosH  : center;
  --PosV  : center;
}
html {
  height: 100%;
  background: orange no-repeat var(--PosH) var(--PosV) url(https://i.picsum.photos/id/926/200/200.jpg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="btH"&gt; change horizontal Position&lt;/button&gt;
&lt;button id="btV"&gt; change vertical Position&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|600431|text|这就是为什么有时我们面临不同浏览器之间的兼容性问题。以前，他们对显示非有效的HTML或CSS更加严格。如今，他们对非标准编码有了更多的容忍，但他们也可以提供意想不到的代码来强制他们的标准。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|600432|您所看到的只是浏览器呈现代码的方式。我认为center+center是浏览器用来区分的默认值。|offset|length|style|CODE|600433|center+top
center+bottom|code-block|syntax|javascript|600434|此外，Chrome检查员有时也可能是一个聪明的人。这是在单击以下代码段中的按钮后“计算”的一个示例：|600435|​|600436|📷|atomic|600437|600438|600439|$('#styler').on('click',function(){
$("#element").css({"background-position":"center","background-color":+"transparent","background-repeat":+"no-repeat","custom":"nonvalid"});
var+posTxt+=+$('#element').css('background-position');
var+pos+=+$('#element').css('backgroundPosition');
console.log('Text:+'%2BposTxt);
console.log('Like+Javascript:+'%2Bpos);
//It's+the+same+value+displayed+using+pure+Javascript
var+elem+=+document.getElementById('element');
var+tab+=+window.getComputedStyle(elem,null).backgroundPosition.trim();
console.log('Javascript:+'%2Btab);
});|600440|/*already+used+style+*/
#element{
++background-color:+rgba(201,76,76);
++width:500px;
++height:500px;
++padding:10px;
}|600441|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button+id="styler">Change+Style</button>

<div+id="element">...</div>|600442|600443|我在这段代码中添加了一行代码，以显示jQuery在将其设置为“中间”后如何读取新的背景位置值。它被显示为"50%25+50%25“，这是window.getComputedStyle()显示的相同值。只是为了告诉您，使用不同的方法，即使是jQuery也没有显示相同的属性名，而是更愿意检索计算出来的数值。对动画、翻译都有帮助。|600444|jQuery还会在应用这些属性之前对它们进行验证。代码检查任何可用的自定义jQuery.cssHooks+(如这些)，否则将被忽略。|600445|总之，我们无法控制这些不同的程序如何显示这些属性。我认为重要的是我们如何正确地设置它们。|600446|使用jQuery来定义每个背景属性可以帮助您在检查器中将它们分开，或者覆盖与正在创建的属性混在一起的现有属性。|600447|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/e5b65d95ad6b7b659a6a6b25a5e5bca4.png|imageAlt|1|LINK|MUTABLE|url|https://api.jquery.com/jQuery.cssHooks/|2|https://github.com/brandonaaron/jquery-cssHooks^0|0|L|D|0|0|0|0|0|1|0|0|0|0|0|0|0|0|0|11|F|1|1J|2|2|0|0|0^^$0|@$1|2|3|4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1R|8|@$D|1S|E|1T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1V|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1W|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1X|8|@]|9|@$D|1Y|E|1Z|1|20]]|A|$]]|$1|T|3|P|5|6|7|21|8|@]|9|@]|A|$]]|$1|U|3|P|5|6|7|22|8|@]|9|@]|A|$]]|$1|V|3|W|5|J|7|23|8|@]|9|@]|A|$K|L]]|$1|X|3|Y|5|J|7|24|8|@]|9|@]|A|$K|L]]|$1|Z|3|10|5|J|7|25|8|@]|9|@]|A|$K|L]]|$1|11|3|P|5|6|7|26|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|27|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|28|8|@]|9|@$D|29|E|2A|1|2B]|$D|2C|E|2D|1|2E]]|A|$]]|$1|16|3|17|5|6|7|2F|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|2G|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|2H|8|@]|9|@]|A|$]]]|1B|$1C|$5|1D|1E|1F|A|$1G|1H|1I|-4]]|1J|$5|1K|1E|1L|A|$1M|1N]]|1O|$5|1K|1E|1L|A|$1M|1P]]]]

<p>That's why sometimes we face compatibility issue among different browsers. Before, they used to be more strict of displaying non valid HTML or CSS. Nowdays, they have more tolerance to non-standard coding but they could also provide unexpected code to force their standards.</p>

<p>What you see is simply the way your browser is rendering your code. I think <code>center center</code> is the default value that the browser uses to distinguish from </p>

<pre><code>center top
center bottom
</code></pre>

<p>Besides, Chrome inspector could be the one playing smart sometimes. This is an example of what's been "computed" after clicking the button in the following snippet :</p>

<p><a href="https://i.stack.imgur.com/UL9uP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UL9uP.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#styler').on('click',function(){
$("#element").css({"background-position":"center","background-color": "transparent","background-repeat": "no-repeat","custom":"nonvalid"});
var posTxt = $('#element').css('background-position');
var pos = $('#element').css('backgroundPosition');
console.log('Text: '+posTxt);
console.log('Like Javascript: '+pos);
//It's the same value displayed using pure Javascript
var elem = document.getElementById('element');
var tab = window.getComputedStyle(elem,null).backgroundPosition.trim();
console.log('Javascript: '+tab);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*already used style */
#element{
  background-color: rgba(201,76,76);
  width:500px;
  height:500px;
  padding:10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;button id="styler"&gt;Change Style&lt;/button&gt;

&lt;div id="element"&gt;...&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>[UPDATE] I added a line to this code to show how is jQuery reading the new background position value after setting it to "center". It's being displayed "50% 50%" which is the same value displayed by window.getComputedStyle().
Just to show you that with different methods even jQuery is not displaying the same property name but prefers to retrieve the computed numerical value.
which could be useful for animations, translations...</p>

<p>jQuery also validates those Css Properties before applying them. The code checks for any available custom <a href="https://api.jquery.com/jQuery.cssHooks/" rel="nofollow noreferrer">jQuery.cssHooks</a> (like <a href="https://github.com/brandonaaron/jquery-cssHooks" rel="nofollow noreferrer">these</a>), if not it will get ignored.</p>

<p>To conclude, we can't control how these different programs display these properties. I think what matters is how we Set them properly.</p>

<p>Using jQuery to define each Background property could help you get them separated in the Inspector or override existing properties being mixed up with the one you are creating. </p>


<p>I have the following code:</p>

<pre><code>$(".element").css("background-position","center");
</code></pre>

<p>For some reason, it does not create a new attribute in CSS called <code>background-position: center</code> and just adds it to the background property like so:</p>

<pre><code>background: center center rgb(251, 251, 251);
</code></pre>

<p>How do I make it so that changing the <strong>background-position</strong> will result in (like you can do in inspect element or pure css) in <strong>Javascript</strong>/<strong>jQuery</strong>:</p>

<pre><code>background-position: center;
</code></pre>


How to change the background position of an element as a new CSS attribute?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有以下代码：$(".element").css("background-position","center");由于某些原因，它不会在CSS中创建一个名为background-position: center的新属性，而只是将其添加到后台属性中，如下所示：background: center center rgb(2...

问如何将元素的背景位置更改为新的CSS属性？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将元素的背景位置更改为新的CSS属性？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将元素的背景位置更改为新的CSS属性？
EN