小编Mar*_*gne的帖子

使用CSS为黑色图标添加另一种颜色

我看到一些应用程序,即使包含黑色图标,应用程序也会使用CSS将图标转换为不同的颜色.我似乎无法重复这个过程

这是我的back.css文件:

.dashboard-buttons a {
    width: 80px; 
    height: 80px; 
    border: 1px solid #ccc; 
    margin: 0px 5px; 
    display:inline-block;
    border-radius: 10px;
    background:white; 
    text-decoration:none;
   -moz-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25);
   -webkit-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25);
}
.dashboard-buttons a:hover {
    text-decoration:underline;
}
.dashboard-buttons span, 
.dashboard-buttons img {
    display:inline; 
    font-size: 12px; 
    font-weight:bold;
}

.dashboard-buttons .sessions img { 
    background-color:#C60; 
}
.dashboard-buttons .sessions img {
    -webkit-mask-image:url(mobile/images/calendar2.png)
}

Run Code Online (Sandbox Code Playgroud)

而html代码如下所示:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="back.css" />
         <title>West</title>
    </head>
    <body>
        <div class="dashboard-buttons">
            <a …

Run Code Online (Sandbox Code Playgroud)

css masking

Joh*_*ohn

2018 05-08

14
推荐指数

1
解决办法

4万
查看次数

在具有多个嵌套对象的对象中使用Vue.set

我试图用来Vue.set()更新Vue 2中的状态对象.

这是对象的样子:

state: {
    entries: [
        // entry 1
        fields: {
            someProperties : ''
            // here I would like to add another property named 'googleInfos'
        }
    ], [
        // entry 2
        fields: {
            someProperties : ''
            // here I would like to add another property named 'googleInfos'

        }
    ]
}

Run Code Online (Sandbox Code Playgroud)

到目前为止,我正在用这个突变更新它.我正在分别改变每个条目,因为它们有不同的内容.

ADD_GOOGLE_INFOS (state, {index, infos}) {
    state.entries[index].fields.googleInfos = infos
}

Run Code Online (Sandbox Code Playgroud)

现在,我正在尝试实施Vue.set()以避免更改检测警告.

我的问题是我找不到合适的方法来添加它.

这是Vue.set()应该如何工作:

Vue.set(state.object, key, value)

Run Code Online (Sandbox Code Playgroud)

所以我尝试了这个,这似乎不起作用,因为state.entries[index]它不是第一级的对象:

Vue.set(state.entries[index], 'fields.googleInfos', infos)

Run Code Online (Sandbox Code Playgroud)

但这也不起作用: …

javascript ecmascript-6 vue.js vuejs2

Mar*_*gne

lucky-day

9
推荐指数

1
解决办法

5607
查看次数

CSS - 以自己的宽度为单位定位元素

我想将元素的中心(无论其高度)放在其父元素的底部.我以为我会选择绝对但没有任何意义.见下图:

<div id="red">
    <div id="blue"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

我怎么能得到这个结果？

编辑:感谢@Gaby aka G. Petrioli我找到了我的解决方案:

#red{
  width: 300px;
  height: 200px;
  background: red;
  position:relative;
}
#blue{
  width: 100px;
  height: 50px;
  background: blue;
  right:3%;
  
  /* here is the magic solution*/
  position:absolute;
  bottom: 0;
  transform: translateY(50%);
}

Run Code Online (Sandbox Code Playgroud)

<div id="red">
        <div id="blue"></div>
    </div>

Run Code Online (Sandbox Code Playgroud)

html css

Mar*_*gne

2017 09-10

7
推荐指数

2
解决办法

5149
查看次数

ThreeJs Object 轻松查看鼠标

我试图让一个物体以一种自然的方式不断地看着鼠标。到目前为止，我已经设法

使对象始终看着鼠标
添加缓动以使其更自然

现在的问题是对象不遵循与鼠标相同的路径，而是始终采用最后一个位置来缓和。

我不知道如何解决这个问题。

// create object and add to scene
const sphere = new THREE.Mesh( geometry, material );
const origin = new THREE.Vector3(0, 0, 75);
sphere.position.x = 0;
sphere.position.z = 0;
sphere.lookAt(origin);
scene.add( sphere );

window.addEventListener("mousemove", onmousemove, false);

var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersectPoint = new THREE.Vector3();

function onmousemove(event) {
  var startRotation = sphere.quaternion.clone();

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1; …

Run Code Online (Sandbox Code Playgroud)

javascript 3d three.js

Mar*_*gne

lucky-day

2
推荐指数

1
解决办法

2083
查看次数

伸缩方向：列；在IE和Edge中无法正常工作

我有一个菜单，其中的列表项目使用flexbox和垂直显示在列表中flex-direction:column。在IE和Edge之外的所有浏览器中，它都可以正常工作。

我尝试了将display flex添加到flex容器的技巧，但是它也不起作用。

有任何想法吗？

这是发生问题的网站：http : //lesdeuxvagues.com/demo

单击菜单中的加号按钮以查看问题

CSS：

ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

html css internet-explorer flexbox microsoft-edge

Mar*_*gne

2017 09-27

1
推荐指数

1
解决办法

4033
查看次数