小编cim*_*non的帖子

我有一个我在这里嘲笑的部分:http://jsfiddle.net/josh_boothman/prry6g1r/

正如您所看到的,它被分成3个部分,这些部分是浮动的,宽度约为33.3%.我想要实现的是当一个特定元素悬停在我的例子中时,例如.col-one,我希望该元素的宽度增加到50%,而其余2个未被覆盖的元素将减少到每个25% .

/* SCSS */

.contact {
background: #414141;
height: 600px;
width: 90%;
margin: 0 auto;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}

.contact-container {
width: 100%;
height: 100%;
}

.contact-col {
width: calc(100% / 3);
height: 100%;
float: left;
display: inline;
@include transition(all, 0.6s);

    &:hover {
    background: rgba(248, 220, 93, 0.6);
    }
}
.contact-option {
text-align: center;
color: white;
@include vertical-align;

    h5 {
    font-size: 30px;
    text-transform: uppercase;
    padding: 0 0 25px 0; …

我想知道是否有任何方法可以强制转换元素影响文档流.

考虑一个像这样的例子: [1] http://jsfiddle.net/pmpcanzn/

缩放元素如何与其他元素的位置相互作用而不与它们重叠？

当对它们应用变换(缩放,平移)时,元素似乎保持其原始空间.有没有改变它的黑客？

我没有寻求没有变换的解决方案.

我有一个 if/else 语句在 scss 的 each 函数中运行。

如果背景等于白色，我基本上希望它使文本变黑

@debug 指令告诉我我的语句正确返回，但所有按钮在悬停时都以黑色文本颜色结束？我在这里错过了什么吗？

//variables
$brand-primary:             #37a2c6 !default;
$brand-success:             #39c66a !default;
$brand-info:                #5bc0de !default;
$brand-warning:             #f7901e !default;
$brand-danger:              #e42829 !default;
$brand-haze:                #9e50da !default;

$color-white:               #ffffff;
$color-black:               #232323;


//map
$colors: (
  ("danger", $brand-danger, $brand-success), ("warning", $brand-warning, $brand-haze), ("success", $brand-success, $brand-primary), ("primary", $brand-primary, $brand-success), ("haze", $brand-haze, $brand-warning), ("pure", $color-white, $color-black)
);

//function
@each $color in $colors {   

  .btn--hollow {
    background: none !important;
    &.btn-#{nth($color,1)} {
      color: #{nth($color,2)} !important;
      &:hover {
        background: #{nth($color,2)} !important;
        @if #{nth($color,2)} == '#ffffff' …

对于一个项目，我们一直在使用SVG图片。我正在尝试为它们着色，但是没有成功，这是SVG：

<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 313.89 311.93">
<defs>
    <style>
        .cls-1 {
            fill: #fff;
            opacity: 0.3;
        }
    </style>
</defs>
<title>goutte_background</title><path
    class="cls-1"
    d="M1145.43,987.78c-45,0-81.7-35.18-82.09-79.35v-4.3h0a63.88,63.88,0,0,1,2-14.07,90.58,90.58,0,0,1,6.25-17.2c13.68-30.49,38.7-63.33,38.7-63.33,18.76-26.58,27.36-46.91,30.88-59.81a147.8,147.8,0,0,0-57.07,12.12,158.6,158.6,0,0,0-83.26,83.26,151.14,151.14,0,0,0-12.12,60.59c0,21.5,3.91,41.83,12.12,60.59a158.6,158.6,0,0,0,83.26,83.26c18.76,8.21,39.09,12.12,60.59,12.12h2c21.5,0,41.83-3.91,60.59-12.12a158.6,158.6,0,0,0,83.26-83.26c8.21-18.76,12.12-39.09,12.12-60.59a151.14,151.14,0,0,0-12.12-60.59,158.6,158.6,0,0,0-83.26-83.26,147.8,147.8,0,0,0-57.07-12.12c3.52,12.9,12.12,33.23,30.88,59.81,0,0,25,32.84,38.7,63.33a90.58,90.58,0,0,1,6.25,17.2,63.88,63.88,0,0,1,2,14.07h0v4.3c-0.39,44.17-37.14,79.35-82.09,79.35h-0.39Z"
    transform="translate(-988.68 -749.72)"/><path
    class="cls-1"
    d="M1145.43,778.26l1.56,6.25c2,8.21,7.82,25.8,24.63,49.64,0,0,18.76,24.24,28.93,46.91a62.83,62.83,0,0,1,4.69,12.9,32.92,32.92,0,0,1,1.56,10.55h0v3.13c0,32.84-27.36,59-61,59h-0.39c-33.62,0-61-26.19-61-59v-3.13h0A32.93,32.93,0,0,1,1086,894a62.83,62.83,0,0,1,4.69-12.9c10.16-22.67,28.93-46.91,28.93-46.91,16.81-23.84,22.67-41.43,24.63-49.64Z"
    transform="translate(-988.68 -749.72)"/></svg>

我目前正在将此SVG用作的背景div，并且正在努力更改其颜色。

这是我尝试过的：

.someParent .cls-1 {填充：＃0080FF！important; }

和

.someParent svg {
  fill: #0080FF !important;
}

我也一直在尝试删除styleSVG，但这没有效果。

这是将SVG用作我的div背景的CSS：

background: #ffffff url("../images/goutte_background.svg") no-repeat right top;

我试图覆盖我网站的特定部分的默认字体样式,但无法使其工作.默认段落设置会覆盖DIV样式.

我的默认段落字体设置如下:

p {
color: #000000;
font: 15px/24px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin-bottom: 24px;
}

我试图通过设置DIV样式来缩小我的页脚字体:

#footer-disclaimers-freedvd {
color: #656565;
font: 12px/18px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

我的HTML看起来像这样:

<div id="footer-disclaimers-freedvd">
<p>some text....</p>
</div>

任何帮助将非常感谢.

谢谢!

首先，我是android开发的新手，到处搜索但没有得到任何解决我的问题的方法。因此，请不要对这篇文章进行负面评价。

我正在制作一个小型游戏应用程序，其中我想在屏幕中央以 bixtext 显示 3 2 1，并且它应该处于透明模式，以便 3 2 1 文本下方的活动应该可见，并且当它达到 1 时那么活动应该像任何游戏一样开始。

我有一个由随机函数函数定义的css变量,我需要这个变量从列表中生成随机背景颜色,每次我进入页面:

@all-background-colors: "#7B8AA8,#00ADD5,#E93C43,#FC8383";
@background-color: color(~`@{all-background-colors}.split(',')[Math.floor(Math.random()*@{all-background-colors}.split(',').length)]`);

然而,似乎每次在我的css中使用此变量时都会执行该函数 - 导致在整个网页中使用许多不同的颜色.

是否有任何方法可以逃避这个并将变量转换为字符串后由函数定义？

我有一张930px x 530px的地图.我想使用mixin将lat/long coords转换为框内的顶部/左侧百分比值.

这就是我到目前为止......

@mixin latLong ($lat, $long) {
    left: (($long + 180) * (930/360)) + %;
    top: (($lat + 90) * (530/180)) + %;
}

我这样用它......

&.m1 {@include latLong(-33.94628333, 151.2157139);}

这是吐出一个值,但是它在引号中,所以它对css无效.我究竟做错了什么？谢谢.

我目前正试图找到一种方法来生成带有Less的前缀关键帧.

这是生成前缀版本的循环,它可以工作.唯一的问题是,当我from{} to{}在dostuff动画中添加一个声明时,它会破坏它并导致Less像混合一样对待它们.有没有办法让这个工作？

@key-prefix: ~"@-webkit-",~"@-o-",~"@-moz-",~"@";
.generate-keyframes(@i) when (@i > 0) {
    .load1-keyframes((@i - 1));
    @prefix: extract(@key-prefix,@i);
    @{prefix}keyframes dostuff {

    }
}
.generate-keyframes(4);

我有一个自己制作的网格系统,我必须计算一列的每个大小.

在每个row拟合12列中.我将在下面给出的每个示例代码都是这种情况.

在计算网格大小的百分比时,这些数字并不总是整数,大多数情况如下:

99.98029427220177
100.01970572779821
100.0146484375
100.009765625
100.01464843750001
100.00976562499999

当我Math.floor在javascript 使用时,我得到这个:

94
96
98
99
98
99

这就是我想要的:

100
100
100
100
100
100

所以全部四舍五入到整个百分比.