小编The*_*ewy的帖子

我正在尝试创建本质上与 CSS 剪辑路径相反的内容。使用 clip-path 时，图像或 div 会被剪裁，以便仅保留您指定的形状，而有效删除背景的其余部分。

我希望这样，如果我剪辑一个形状，它基本上会在最上层打一个洞并移除形状，而不是背景。这可能吗？我也愿意接受 SVG 解决方案，但我是 SVG 新手，所以请善待:)

基本上，在下面的代码中，我有一个绝对位于红色方块内的蓝色方块，并希望能够从蓝色方块中冲压出一个形状，以便下面的红色层显示过去形状的位置。实际上会有一个图像作为背景层，所以我不能接受模仿我想要的但实际上并没有打出形状的伪效果。

任何帮助将是惊人的！

代码笔：https ://codepen.io/emilychews/pen/GQmyqx

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;
  }

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: red;
}

#innerbox {
  width: 100%;
  height: 100%;
  background: blue;
  top: 0;
  left: 0;
  position: absolute;
}

<div id="box">
  <div id="innerbox"></div>
</div>

我已经设置了三个系列的容器和应用display: flex;,并flex-wrap: wrap;给他们,但是当我缩小窗口的大小,他们没有包装？

我已经把代码放在下面,似乎无法解决问题的根源.

body {
  font-family: arial;
}

p {
  color: white;
}

.container {
  background-color: #666;
  width: 800px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 10px;
  box-sizing: border-box;
}

.item1 {
  flex: 1;
  background-color: red;
}

.item2 {
  flex: 1;
  background-color: blue;
}

.item3 {
  flex: 1;
  background-color: green;
}

<div class="container">

  <div class="item item1">
    <h1>ITEM1</h1>
    <p>flex: 1</p>
  </div>

  <div class="item item2">
    <h1>ITEM2</h1>
    <p>flex: 1</p>
  </div> …

我在使用提交时正在做一个git revert git revert [commit number]

现实生活中的例子是:

git revert 58c128313e353b8dd7d04121824b966faefe68dc

在我这样做后,它将我带到屏幕,它显示了恢复信息,但我无法退出此屏幕,我无法输入任何内容.

我已经尝试按Q这就是我退出git日志屏幕的方式,但这也不起作用.当我强制退出终端并返回时,恢复已经发生.

如何进行恢复,然后返回命令行并继续照常工作？

这是它所说的截图

当某些浏览器无法使用此方法时，是否可以将内置的javascript方法存储在变量中以设置不同的行为？

我的特定情况是在Safari或旧版MS浏览器中不可用的intersectionObserver。我有一些由此触发的动画，如果不可用intersectionObserver，请关闭它们。

我想要做的基本上是这样的：

var iO = intersectionObserver;

if ( !iO ) {
 // set other defaults
}

我真的不想只为一个功能加载polyfill或库吗？

非常感谢

艾米莉

我有一个CSS网格,我正在尝试将justify-items属性设置为start.

这个(或与之相关的任何其他属性)都不起作用,在我的文本编辑器(atom)中,它显示为灰色,通常表示错误.

我看过规范,这个属性肯定是规范的一部分,甚至找到了它的视频教程.

当我使用它虽然它不起作用,我无法理解为什么.

当我将代码复制到codepen时,它仍然无法正常工作.

这里的代码:https://codepen.io/emilychews/pen/EvLPgJ

.gridwrapper {
  background: #e6e6e6;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  justify-items: start; /* THIS LINE ISN'T WORKING */
  align-items: stretch;
}

.gridwrapper div:nth-child(1) {
  grid-column: 1 / 4;
}

.gridwrapper div:nth-child(6) {
  grid-column: 1 / 3;
}

.gridwrapper div {
  padding: 1em;
  background: red;
  border: white;
  width: 100%;
  color: white;
  box-sizing: border-box;
}

.gridwrapper div:nth-child(odd) {
  background: blue;
}

<div class="gridwrapper">
  <div class="grid …

我有一个CSS网格布局,我使用该grid-column属性跨越整个网格的顶行.

有谁知道如何将此行设置为100px高并将所有后续行设置为grid-auto-rows200px 的高度？

我知道我可以输入grid-template-rows所有特定行的单个值,但页面上会有很多div,并且不想输入100px,然后使用此grid-template-rows属性输入200px的值.

我认为必须有一种方法可以在某些行上设置单个像素值,然后将其他所有内容设置为grid-auto-rows？

我似乎无法在文档中找到如何做到这一点.

任何帮助都是极好的!

https://codepen.io/emilychews/pen/dZPJGQ

.gridwrapper {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  grid-auto-rows: 200px;
  grid-template-rows: 100px 200px;
  grid-gap: 10px;
}

nav {
  background: yellow;
}

.gridwrapper div {
  padding: 1em;
  background: red;
  color: white;
  box-sizing: border-box;
}

.gridwrapper div:nth-child(odd) {
  background: blue;
}

nav {
  grid-column: 1 / -1;
}

/*MAKE DIVS 1FR ON MOBILE*/
@media only screen and (max-width: 736px) {
  .gridwrapper {
    grid-template-columns: 1fr;
  } …

我有一个图像预览器，它使用 JavaScriptImage()对象在用 PHP 处理图像之前预览图像。我有一个包含 'x' SVG 图形的 div，该图形的目标是单击事件以删除图像。

在函数底部的下面代码中，它使用evt.target并基本上删除每个图像所在的父元素，如果用户希望删除图像。

这一切在视觉层面上都可以正常工作，但即使图像被删除（并且它们从 HTML 中删除），当表单上的“提交”元素被单击以上传图像时，仍会处理任何已删除的图像。从我可以收集到的图像存储在内存中并从那里进行处理。

我已经尝试将图像本身（thumbnailElement在 JavaScript 中）设置为 null 并将其 src 属性设置为空字符串，但这不起作用。

防止处理这些已删除的图像预览的最佳方法是什么？

在下面的代码中，我将 'x' 的 SVG 图形换成了字母 'x' 以使其更易于阅读。

注意：我已经在下面展示了整个图像上传器 - 但它是下面 JS 的最后一部分，// Delete Images这是我需要帮助的部分。

代码笔：https ://codepen.io/emilychews/pen/WNjZVGZ

const dropZone = document.getElementById('drop-zone'),
    showSelectedImages = document.getElementById('show-selected-images'),
    fileUploader = document.getElementById('standard-upload-files')  

dropZone.addEventListener("click", (evt) => {
    // assigns the dropzone to the hidden input element so when you click 'select files' it brings up a file …

我试图$headers = "From: webmaster@example.com\r\n";在PHP中使用，将联系表单上的“发件人”电子邮件地址设置为“ name@companyname.com”。

它是参考此答案的PHP邮件功能“发件人”地址，我对php还是很陌生，因此，如果答案很明显，我深表歉意，但它使我无所适从。

表单的代码如下，但我似乎无法正常工作？有谁知道如何/在哪里将其与下面的代码集成。

亲切的问候，

<?php 

    if($_POST['submit']) {

        if(!$_POST['name']) {
            $error="<br>- Please enter your name";
        }
        if(!$_POST['email']) {
            $error.="<br>- Please enter your email";
        }
        if(!$_POST['telephone']) {
            $error.="<br>- Please enter your telephone number";
        }
        if(!$_POST['message']) {
            $error.="<br>- Please enter your message";
        }
        if(!$_POST['checkbox']) {
            $error.="<br>- Please confirm you agree to the Privacy Policy";
        }

        if ($error) {
            $result='<div class="alert error">Whoops, there is an error. Please correct the following: '.$error.'</div>';
        } else {
        mail("name@company.com", "Contact …

在Ruby教程中,当你输入一个数字时,我正在看.class它返回Bignum或者Fixnum.

当我这样做时,我得到了Integer:

12345.class
#=> Integer

我在mac上的命令行中使用irb.为什么以上不会Fixnum像在教程中那样返回？

******尽管被标记为重复-另一个问题无法回答我的问题******

我想知道为什么不总是使用display：inline-block float：left的INSTEAD。内联块似乎在布局方面更容易控制，并且不存在必须清除浮点等问题。我试图弄清楚为什么使用一种而不是另一种。

非常感谢，

艾米丽