小编Tem*_*fif的帖子
在线性渐变上使用背景位置的百分比值
有没有办法background-position取出百分比值？目前我的按钮仅适用于一个明确的价值观width和background-position.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
font-weight: bold;
width: 350px;
height: 50px;
border: 1px solid green;
transition: background 0.5s;
background-repeat: no-repeat;
background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
background-position: 0px 0px, 350px 0px;
}
.button-percentage …推荐指数
解决办法
查看次数
与背景相比,使用CSS拆分文本颜色
我正在努力实现以下目标,但真的很挣扎.我只是试图获得一个穿过文本的对角背景并改变我选择的颜色.
我试过使用css混合混合模式,但它只是对比我的颜色,而不是选择分成两种不同的颜色.
* {
margin: 0;
padding: 0
}
header {
overflow: hidden;
height: 100vh;
background-color: #FFF;
background-image: -webkit-linear-gradient(30deg, #FFF 50%, #adf175 50%);
min-height: 500px;
}
h2 {
color: white;
font: 900 35vmin/35vh cookie, cursive;
text-align: center;
position: fixed;
top: 0px;
left: 20px;
mix-blend-mode: difference;
}
h2:after {
color: white;
mix-blend-mode: difference;
}<header>
<h2>On A Mission</h2>
</header>推荐指数
解决办法
查看次数
为什么我不能为自定义属性（又名 CSS 变量）设置动画？
看这个动画：
- 金色 div 有一个动画，其中自定义属性被动画化
（@keyframes roll-o-1animates--o）。
这一步动画。 - 银色 div 有一个动画，其中一个普通属性被动画化
（@keyframes roll-o-2animatesleft）。
这会连续动画。
为什么金色 div 动画不流畅？
是否有任何解决方法也使用变量？
#one {
width: 50px;
height: 50px;
background-color: gold;
--o: 0;
animation: roll-o-1 2s infinite alternate ease-in-out both;
position: relative;
left: calc(var(--o) * 1px);
}
@keyframes roll-o-1 {
0% {
--o: 0;
}
50% {
--o: 50;
}
100% {
--o: 100;
}
}
#two {
width: 50px;
height: 50px;
background-color: silver;
--o: 0; …推荐指数
解决办法
查看次数
基于高度的容器查询不起作用
我想在现代 Safari/Chrome 浏览器中使用新的 CSS 容器查询。（Safari 16.3、谷歌浏览器 113.0）
但是，基于高度的容器查询并未按预期工作。
预期结果：一旦外部容器变成蓝色（500px 屏幕高度或以下），我预计粉色方块（500px 容器的 50vh）就会变成红色。
当前结果：正方形保持粉红色并且不会变成粉红色。如果实现是相对宽度的，则该示例有效。
我在实现中是否做错了什么，或者只是没有在 Webkit 引擎中实现 jet ？如果在最终产品中用户可以调整容器的大小，还有其他解决方案（不使用 JavaScript）来解决该问题吗？
body {
margin: 0
}
.container {
height: 50vh;
container-type: inline-size;
}
.test {
width: 250px;
height: 250px;
background-color: hotpink;
}
@container (max-height: 250px) {
.test {
background-color: red;
}
}
@media screen and (max-height: 500px) {
.container {
background: blue;
}
}<div class="container">
<div class="test"></div>
</div>推荐指数
解决办法
查看次数
为什么nth-of-type/nth-child不能在嵌套元素上工作？
我正在尝试改变div中奇数div的样式.出于某种原因,nth-of-type(odd)当它在另一个div中时,它会影响我的所有div.这是我的常规div和奇数div的代码:
.video-entry-summary {
width: 214px;
height: 210px;
margin-left: 10px;
float: left;
position: relative;
overflow: hidden;
border: 1px solid black;
}
.video-entry-summary:nth-of-type(odd) {
width: 214px;
height: 210px;
margin-left: 0px;
float: left;
position: relative;
overflow: hidden;
border: 1px solid black;
background: #ccc;
}<div id="post-501" class="post-501 post type-post status-publish format-standard hentry category-moto-dz-films tag-news-sub-2">
<div class="video-entry-summary">
video 1
</div>
</div>
<div id="post-240" class="post-240 post type-post status-publish format-standard hentry category-videos">
<div class="video-entry-summary">
video 2
</div>
</div>
<div id="post-232" class="post-232 post type-post status-publish …推荐指数
解决办法
查看次数
你能漂浮到跨度的右边吗？
在下面的代码我想要up并down浮动到红线的右边,但它们浮过它到div.
为什么是这样？
#outer {
margin-top: 50px;
margin-left: 50px;
width: 300px;
border: 1px solid lightgrey;
}
.inner {
border: 1px solid red;
padding: 15px 80px 15px 40px;
position: relative;
}
.up, .down {
border: 1px solid #000;
float: right;
}
.down {
clear: both;
}<div id="outer">
<span class="inner">
<span class="quantity">Quantity</span>
<span class="up">up</span>
<span class="down">down</span>
</span>
</div>推荐指数
解决办法
查看次数
在css网格中实现flexbox行反转
在掌握了 Flexbox 之后，我开始学习 CSS 网格。
这是我之前构建的一个简单的弹性盒网格：
.container {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
.flex {
display: flex;
flex-flow: row wrap;
}
.col {
padding: 24px;
flex: 1;
}
.flex:nth-child(even) {
flex-flow: row-reverse wrap;
text-align: left;
}
img {
height: auto;
max-width: 100%;
}<div class="container">
<div class="flex">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .flex -->
<div class="flex">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col"> …推荐指数
解决办法
查看次数
停止 Dashlane 自动填充特定输入字段？
有谁知道怎么给Dashlane浏览器插件提示留下一个 <input>单独文本字段？
对于大多数浏览器密码管理器，将auto-complete属性设置为off有效，例如：<input type='text' autocomplete='off' />。
对于 LastPass，建议使用此附加属性：data-lpignore="true".
我不知道这对 Dashlane 来说意味着什么。我注意到属性data-kwimpalastatus="alive"和data-kwimpalaid="xxxx-x"（在哪里xxxx-x自动生成的标识符）被添加到我的页面，所以这看起来是一个明智的开始，但我并没有很高兴弄清楚魔法咒语......
万一有人问，我使用的唯一其他浏览器扩展是 DuckDuckGo 和 Google Docs 离线，所以可以肯定的是 datakwimpala*属性归结为 Dashlane。
有没有人有任何想法？
谢谢！
推荐指数
解决办法
查看次数
创建响应式收据截止（之字形边框）
我正在尝试使一些 HTML 和 CSS 看起来像收据。我希望这张收据的底部看起来像是被撕下来的。我已经得到了 ::after 样式，看起来很接近我想要的样式，但是在移动设备上它显示出一些奇怪的线条。我需要一种在移动屏幕尺寸上看起来不错的响应式设计。
这是我正在寻找的设计：
这是我的尝试，但出现了奇怪的线条：
这是我正在使用的代码：
body {
background: black;
}
.StyledReceipt {
background-color: #fff;
width: 22rem;
position: relative;
padding: 1rem;
box-shadow: 0 -0.4rem 1rem -0.4rem rgba(0, 0, 0, 0.2);
}
.StyledReceipt::after {
background-image: linear-gradient(135deg, #fff 0.5rem, transparent 0),
linear-gradient(-135deg, #fff 0.5rem, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 1rem;
content: '';
display: block;
position: absolute;
bottom: -1rem;
left: 0;
width: 100%;
height: 1rem;
}<div class="StyledReceipt">Test</div>推荐指数
解决办法
查看次数
找不到模块：无法解析“D:\NextJs\Trial-app\node_modules\lucide-react\dist\cjs\icons\check”
我一直在从 shadcn 构建一个具有暗模式功能的 Next js 应用程序。我按照 shadcn 的所有步骤操作并安装了所有模块，但是当我运行该应用程序时，它给了我这个错误。我认为这是因为 lucide-react-icons 的缘故。我尝试修复但没有。有什么解决方案吗？
我尝试安装 lucid React 但它不起作用。
推荐指数
解决办法
查看次数
标签 统计
css ×9
html ×5
css3 ×3
background ×1
css-float ×1
css-grid ×1
css-shapes ×1
flexbox ×1
javascript ×1
next.js ×1
pseudo-class ×1
reactjs ×1