Question

我要做的就是用背景图片制作一个全宽度的div，以便我可以嵌套或放置文本。

这是我的div

<div class="dpsplash">
</div>

这是dpsplash类

.dpsplash {
    background-image: url('img/banner1.png');
    width: 100%;
    height: 100vh;
}

没有其他代码，由于某种原因它没有显示图像，我引用了网址但是不确定，这是网站http://deliciousproductions.com.au

如果您想要一个响应式div背景图像类，在屏幕大小调整期间保持相同的可见高度，您可以使用该类

.responsivebg {
    background-image: url('/img/etc..');    
    background-size: auto 600px;
    height: 400px;
    background-position: center top;
    background-repeat: no-repeat;
}

我觉得它很方便

Answer 1

我会这样做：

.dpsplash {
    background-image: url('/img/banner1.png');
    background-size: cover;
}

您可以将background-size用作cover作为整页。

注意路径前面添加了/，以便它引用 root 中的图像

Answer 2

改变这个：

import javax.swing.JFrame;
import javax.swing.JTextField;
import javax.swing.JTextArea;
import javax.swing.JScrollPane;
import javax.swing.SwingUtilities;

import java.awt.BorderLayout;

import java.net.ServerSocket;
import java.net.Socket;
import java.net.InetAddress;

import java.io.EOFException;
import java.io.IOException;
import java.io.ObjectInputStream;


public class xServer extends JFrame
{
    public JTextField textField1;
    public JTextArea textArea1;

    public ServerSocket server;
    public Socket connection;

    public int counter = 1;

    public ObjectInputStream input;

    public xServer()
    {
        this.setTitle("Server");
        this.setSize(500,200);
        this.setVisible(true);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        textField1 = new JTextField();
        //textField1.setEditable(false);
        this.add(textField1,BorderLayout.NORTH);

        textArea1 = new JTextArea();
        textArea1.setEditable(false);

        JScrollPane pane = new JScrollPane(textArea1);

        this.add(pane,BorderLayout.CENTER);
    }

    public void runServer()
    {
        try
        {
            server = new ServerSocket(12345,100);

            while(true)
            {
                try
                {
                    waitForConnection();
                    getStreams();
                    processConnection();
                }
                catch(EOFException eof)
                {
                    displayMessage("\n Server terminated connection");
                }
                finally        
                {
                    System.out.println("Bye");
                    counter++;
                }

            }
        }
        catch(IOException io)
        {
            io.printStackTrace();    
        }
    }

    public void waitForConnection() throws IOException
    {
      displayMessage("Waiting for connection\n");
      connection = server.accept();
      displayMessage("Connection " + counter + " received from: " + connection.getInetAddress().getHostName());

    }

    public void displayMessage(final String messageToDisplay)
    {
        SwingUtilities.invokeLater
                (
                        new Runnable()
                        {
                            public void run()
                            {
                                textArea1.append(messageToDisplay);
                            }
                        }
                );

    }

    public void getStreams() throws IOException
    {
        input = new ObjectInputStream(connection.getInputStream());

        displayMessage("\n Get I/O streams");
    }

    public void processConnection() throws IOException
    {
        String message ="Test";

        do
        {
            try
            {
                message = (String) input.readObject();
                displayMessage("\n" + message);
            }
            catch(ClassNotFoundException cnf)
            {
                displayMessage("\n Unknown object type received");
            }
        }
        while(!message.equals("CLIENT>>> TERMINATE"));

    }

    public void closeConnetion()
    {
        displayMessage("\nTerminating connection\n");

        try
        {
            input.close();
            connection.close();
        }
        catch(IOException io)
        {
            io.printStackTrace();
        }
    }


    public static void main(String[]args)
    {
        xServer server = new xServer();
        server.runServer();
    }

}

进入这个：

background-image: url('img/banner1.png');

你已经定下来了。

Answer 3

该链接是相对的，因此它引用了img目录中的css目录

http://deliciousproductions.com.au/css/img/banner1.png

background-image: url('../img/banner1.png');

那应该解决它

Answer 4

将您的代码更改为：

.dpsplash {
    background-image: url('../img/banner1.png');
    width: 100%;
    height: 100vh;
}

Answer 5

＆＃34;身高：100vh;＆＃34;似乎是css3属性。您是否检查过您的浏览器是否支持它？如果div为空，则高度将为零，将不会看到背景图像。你试过在div标签里放一些文字吗？您可以尝试删除＆＃34; height＆＃34;。当您在其中输入文字或内容时，Div标签应该会展开。

Answer 6

背景图片可能很棘手，但它们最终没有响应，但这篇文章将帮助您解决这个问题。

https://css-tricks.com/perfect-full-page-background-image/

设置div背景图像真的很难吗？

6 个答案: