CSS 使用 Chrome 开发工具在实时站点上测试本地背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24785547/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Test Local Background Image on Live Site with Chrome Dev Tools?
提问by mcography
Is there any way to use Chrome dev tools to test different images? I have created a new background graphic and I would like to test it on a live site that already has a background graphic on the <body>tag. I don't want to change the live site yet, though. Just test it to see what the new image looks like. Is this possible?
有没有办法使用 Chrome 开发工具来测试不同的图像？我创建了一个新的背景图形，我想在<body>标签上已有背景图形的实时站点上对其进行测试。不过，我还不想更改实时站点。只需对其进行测试以查看新图像的外观。这可能吗？
采纳答案by Chirag Bhatia - chirag64
You can replace the url of the background image in the Elementspanel with the url of the image you wish to try. Check this linkto see how that is done.
您可以将Elements面板中背景图片的网址替换为您想尝试的图片网址。检查此链接以了解如何完成。
This change will show effect immediately in your browser window. As Johan Lindermentioned, you will have to host the image somewhere in case you have the image on your computer.
此更改将立即在您的浏览器窗口中显示效果。正如Johan Linder 所提到的，如果您的计算机上有图像，您必须将图像托管在某处。
nate wilton's answercorrectly points out how to do this using a Chrome extension.
内特威尔顿的回答正确地指出了如何使用 Chrome 扩展程序来做到这一点。
回答by nate_wilton
Here is the answer, courtesy of Rob Donovan @ superuser (via https://superuser.com/a/839500/454034)
这是答案，由 Rob Donovan @ superuser 提供（通过https://superuser.com/a/839500/454034）
Since you mentioned 'Chrome', you could use Chrome extensions to do this, to enable local access to your files.
由于您提到了“Chrome”，您可以使用 Chrome 扩展程序来执行此操作，以启用对文件的本地访问。
Follow these steps:
按着这些次序：
1) In the local folder where your image(s) are, create this file called 'manifest.json' and enter this:
1) 在您的图像所在的本地文件夹中，创建名为“manifest.json”的文件并输入：
{
"name": "File Exposer",
"manifest_version": 2,
"version": "1.0",
"web_accessible_resources": ["*.jpg","*.JPG"]
}
2) Put this is your chrome address bar: chrome://extensions/
2）把这是你的chrome地址栏：chrome://extensions/
3) Make sure 'Developer mode' is checked (Top right of page)
3）确保选中“开发者模式”（页面右上角）
4) Click the 'Load Unpacked Extension' button
4) 单击“加载未打包的扩展”按钮
5) Navigate to the local folder where the image(s) and the manifest.json file is, click ok
5) 导航到图像和 manifest.json 文件所在的本地文件夹，单击确定
6) The extension 'File Exposer' should now be listed in the list, and have a check mark against 'Enabled'. If the folder is on a network drive or other slow drive or has lots of files in, it could take 10-20 seconds or more to appear in the list.
6) 扩展名“File Exposer”现在应该列在列表中，并且对“Enabled”有一个复选标记。如果文件夹位于网络驱动器或其他慢速驱动器上，或者包含大量文件，则可能需要 10-20 秒或更长时间才能显示在列表中。
7) Note the 'ID' string that has been associated with your extension. This is the EXTENSION_ID
7) 请注意与您的扩展相关联的“ID”字符串。这是 EXTENSION_ID
8) Now in your HTML you can access the file with the following, changing the 'EXTENSION_ID' to whatever ID your extension generated:
8) 现在在您的 HTML 中，您可以使用以下内容访问该文件，将“EXTENSION_ID”更改为您的扩展程序生成的任何 ID：
<img src='chrome-extension://EXTENSION_ID/example1.jpg'>
Note, that the *.jpg is recursive and it will automatically match files in the specified folder and all sub folders, you dont need to specify for each sub folder. Also note, its Case Sensitive.
注意，*.jpg 是递归的，它会自动匹配指定文件夹和所有子文件夹中的文件，您不需要为每个子文件夹指定。另请注意，它区分大小写。
In the 'img' tag you don't specify the original folder, its relative from that folder, so only sub folders need to be specified.
在 'img' 标签中，您没有指定原始文件夹，它是该文件夹的相对文件夹，因此只需要指定子文件夹。
If you modify the manifest.json file, you will need to click the 'Reload (Ctrl+R)' link next to the extension.
如果修改 manifest.json 文件，则需要单击扩展名旁边的“重新加载 (Ctrl+R)”链接。
回答by Andreas Muller
Another option would be to start a simple http server.
另一种选择是启动一个简单的 http 服务器。
In your terminal (or command prompt), cdinto the directory where your images are saved and then type python -m SimpleHTTPServer.
在您的终端（或命令提示符）中，cd进入保存图像的目录，然后键入python -m SimpleHTTPServer.
Now you can reference the images in dev tools using http://localhost:8000/filename.jpg.
现在您可以使用http://localhost:8000/filename.jpg.
回答by Johan Linder
This is not an exact answer to your question, but one way you could do it is to use something like dropbox public folder. Once the image is in the folder you can just right click and copy a public url to use in the dev tools.
这不是您问题的确切答案，但您可以这样做的一种方法是使用诸如dropbox public folder 之类的东西。图像进入文件夹后，您只需右键单击并复制公共 URL 即可在开发工具中使用。
回答by dimshik
I think the best and simplest solution is to convert your image into Base64 (you can use any online/offline tool for that) and then just paste the output inside DevTools.
我认为最好和最简单的解决方案是将您的图像转换为 Base64（您可以使用任何在线/离线工具），然后将输出粘贴到 DevTools 中。
If you need it in an IMG tag, do it like that:
如果您需要在 IMG 标签中使用它，请这样做：
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
If you need it as a background image, you can do it like that:
如果你需要它作为背景图片，你可以这样做：
.background {
background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==");
}
